不确定跨域错误的来源

Question

由于某种原因，添加该行{jokes.map(joke => joke.setup)}（请参阅下面的完整组件）会引发错误（如下所示）。我觉得这与 useState 挂钩有关，但我不确定解决方法。任何帮助，将不胜感激！

组件代码如下：

import React, {useState, useEffect} from 'react'

function JokeFinder() {

    //2 states: input query, jokes shown

    const [query, setQuery] = useState('')

    const [jokes, setJokes] = useState([])

    

    const getJokes = async (event) => {

        

        event.preventDefault();

        let URL;

        

        try{

            if(query === "one" || query === "1") {

                URL = `https://official-joke-api.appspot.com/jokes/random`

            } else if (query === "ten" || query === "10") {

                URL = 'https://official-joke-api.appspot.com/jokes/ten'

            }

            const result = await fetch(URL);

            const data = await result.json();

            setJokes(data);

        } catch(err) {

            console.log(err);

        }

    }

    

    const changeHandler = (event) => {

        setQuery(event.target.value)

    }

    

    return(

        <div>

            <form className="form" onSubmit={getJokes}>

                <label className="label" htmlFor="query">It's never a bad time to have a laugh! How many jokes would you like to enjoy? One or ten? Type in the number below.</label>

                <input 

                    className="input"

                    type="text"

                    name="query"

                    placeholder="Enter number of Jokes Desired"

                    value={query}

                    onChange={changeHandler}

                />

                <button className="button" type="submit">Search!</button>

            </form>

            <div className="card-list">

                {jokes.map(joke => joke.setup)}

            </div>

        </div>

    )

}

export default JokeFinder

Answer 1

您错误地使用了地图功能。您应该将函数传递给映射。const { useState } = React;const JokeFinder = () => {&nbsp; const [query, setQuery] = useState("");&nbsp; const [jokes, setJokes] = useState([]);&nbsp; const getJokes = event => {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; let URL;&nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; if (query === "one" || query === "1") {&nbsp; &nbsp; &nbsp; &nbsp; URL = `https://official-joke-api.appspot.com/jokes/random`;&nbsp; &nbsp; &nbsp; } else if (query === "ten" || query === "10") {&nbsp; &nbsp; &nbsp; &nbsp; URL = "https://official-joke-api.appspot.com/jokes/ten";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; fetch(URL).then((result) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;result.json().then(data => setJokes(data));&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; } catch (err) {&nbsp; &nbsp; &nbsp; console.log(err);&nbsp; &nbsp; }&nbsp; };&nbsp; const changeHandler = event => {&nbsp; &nbsp; setQuery(event.target.value);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <form className="form" onSubmit={getJokes}>&nbsp; &nbsp; &nbsp; &nbsp; <label className="label" htmlFor="query">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; It's never a bad time to have a laugh! How many jokes would you like&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; to enjoy? One or ten? Type in the number below.&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; <div className="input-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;className="input"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name="query"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;placeholder="Enter number of Jokes Desired (only one or ten)"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value={query}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onChange={changeHandler}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button className="button" type="submit">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Search!&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; <div className="card-list">&nbsp; &nbsp; &nbsp; &nbsp; {jokes.length ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jokes.map((joke, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="setup" >{joke.setup}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="punchline">{joke.punchline}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="setup">{jokes.setup}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="punchline">{jokes.punchline}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );};class App extends React.Component {&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <JokeFinder />&nbsp; &nbsp; );&nbsp; }}ReactDOM.render(<App />, document.getElementById('root'));.input-container {&nbsp; margin-top: 10px;}.input-container input {&nbsp; margin-right: 10px;&nbsp; min-width: 240px;}.setup {&nbsp; font-weight: 700;}.punchline {&nbsp; padding-left: 10px;}<html><body>&nbsp; <div id="root"></div>&nbsp; <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>&nbsp; <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script></body></html>你可以在这里找到工作示例