由于某些原因，添加行{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
遇到的错误如下：
!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.
您错误地使用了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>你可以在这里找到的工作示例