由于某种原因，添加该行{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
1 回答
天涯尽头无女友
TA贡献1831条经验 获得超9个赞
您错误地使用了地图功能。您应该将函数传递给映射。
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>
你可以在这里找到工作示例
添加回答
举报
0/150
提交
取消