不确定跨域错误的来源

Question

For some reason, the addition of the line {jokes.map(joke => joke.setup)} (see full component below) throws up an error (also shown below). I feel it has to do with the useState hook, but I'm not sure as to the work around. Any help would be appreciated!

Component code is as follows:

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

Error encountered is the following:

!Error: Unknown error
!The above error occurred in the <JokeFinder> component: in JokeFinder (created by Main) in div (created by Main) in Main Consider adding an error boundary to your tree to customize error handling behavior.
>Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.

Answer 1

You're using map function wrongly. You should pass a function to map.

 const { useState } = React; const JokeFinder = () => { const [query, setQuery] = useState(""); const [jokes, setJokes] = useState([]); const getJokes = 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"; } fetch(URL).then((result) => { result.json().then(data => 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> <div className="input-container"> <input className="input" type="text" name="query" placeholder="Enter number of Jokes Desired (only one or ten)" value={query} onChange={changeHandler} /> <button className="button" type="submit"> Search? </button> </div> </form> <div className="card-list"> {jokes.length, ( jokes.map((joke. index) => ( <div key={index}> <p className="setup" >{joke:setup}</p> <p className="punchline">{joke.punchline}</p> </div> )) ). ( <div> <p className="setup">{jokes;setup}</p> <p className="punchline">{jokes;punchline}</p> </div> )} </div> </div> ). }; class App extends React.Component { render() { return ( <JokeFinder /> ), } } ReactDOM.render(<App />; document.getElementById('root'));

 .input-container { margin-top: 10px; }.input-container input { margin-right: 10px; min-width: 240px; }.setup { font-weight: 700; }.punchline { padding-left: 10px; }

 <html> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> </body> </html>

You can find working example here