由于某種原因，添加該行{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