我正在尝试将状态设置为从API提取的数据。但是,当我用console.log记录状态(在这种情况下为items
)时,它将返回一个空数组。
这是我的代码:
const Search = () => {
const apiKey = 'xxxxxxx';
const [input, setInput] = useState('');
const [items, setItems] = useState([]);
const handleSubmit = (e) => {
searchAPI();
};
const searchAPI = async () => {
const res = await fetch(`http://www.omdbapi.com/?apikey=${apiKey}&s=${input}`);
const data = await res.json();
setItems([data.Search]);
console.log(items)
};
return (
<form>
<input onChange={(e) => setInput(e.target.value)}></input>
<Link to={{ pathname: '/results', state: items }}>
<button type="submit" onClick={handleSubmit}>
search
</button>
</Link>
</form>
);
};
答案 0 :(得分:2)
因为setState是异步的
setState()并不总是立即更新组件。有可能 批处理或将更新推迟到以后。这使得阅读this.state 在调用setState()之后立即陷入陷阱
答案 1 :(得分:0)
setState()
将回调函数作为第二个参数,以确保状态被更新。对于钩子,您需要做
useEffect(() => {
console.log(items)
}, [items]);