不能将React状态设置为对象数组

Question

我试图通过Axios get请求将React状态设置为对象数组。然而，当我尝试更新状态时，它显示为一个空数组。

我知道我正在从API接收正确的响应，所以我认为我在更新状态时遗漏了一些东西。

下面是我的代码:

const Home = () => {
const [movieTitle, setMovieTitle] = useState('');
const [searchResults, setSearchResults] = useState([]);
const handleChange = (e) => {
setMovieTitle(e.target.value);
};
const getMovieData = () => {
const apiKey = 'didntleakit';
const apiUrl  = 'http://www.omdbapi.com/?apikey=' + apiKey + '&s=' + movieTitle;
Axios.get(apiUrl)
.then((res) => {
setSearchResults(res.data.Search);
});
console.log(searchResults);
};
return(
<div>
<p>Home page</p>
<TextField defaultValue="Movie" onChange={(e) => handleChange(e)}/>
<button onClick={getMovieData}/>
</div>
);

};

Answer 1

不能在将状态变量设置为setState是async后立即记录状态变量。您可以在useEffect中记录更新状态:

import {useEffect} from 'react'
useEffect(() => {
console.log(searchResults);
}, [searchResults])

Answer 2

这是因为您正在记录searchResults之前的数据被检索。Axios.get()是一个异步函数，要修复它，只需在返回JSX代码之前添加console.log:

console.log(searchResults);
return (<div>....</div>);

因此，当从端点检索到数据时，您将更新searchResults，这将以更新的状态重新呈现组件，并将正确的searchResults记录到控制台。

Answer 3

你不能在设置它为异步后记录状态，所以在useEffect中记录它，并将状态作为依赖数组传递。

如果是对象或数组，在设置状态时总是尝试使用扩展操作符。

const Home = () => {
const [movieTitle, setMovieTitle] = useState('');
const [searchResults, setSearchResults] = useState([]);
const handleChange = (e) => {
setMovieTitle(e.target.value);
};
const getMovieData = () => {
const apiKey = 'didntleakit';
const apiUrl  = 'http://www.omdbapi.com/?apikey=' + apiKey + '&s=' + 
movieTitle;
Axios.get(apiUrl)
.then((res) => {
setSearchResults([...res.data.Search]);//use spread operator for  optimised code
});

};
useEffect(()=>{
console.log(searchResults);
},[searchResults])
return(
<div>
<p>Home page</p>
<TextField defaultValue="Movie" onChange={(e) => handleChange(e)}/>
<button onClick={getMovieData}/>
</div>
);
};