无法将 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异步后立即记录它。您可以在以下位置记录更新后的状态useEffect：

import {useEffect} from 'react'

useEffect(() => {
  console.log(searchResults);
}, [searchResults])