React使用Axios请求后无法将state设置为对象数组如何解决？

核心问题点 #

• React 的状态更新是异步批量执行的，调用 setSearchResults 后不会立刻修改当前作用域下的 searchResults 变量，新的状态值要等到组件下一次渲染时才会生效
• Axios.get 是异步网络请求，then 回调会在请求成功返回后才触发，你写在 Axios.get 之后的 console.log 是同步执行的，执行时请求还没返回、setSearchResults 还没有被调用，自然只能拿到初始的空数组

验证状态更新成功的方式 #

你可以把打印逻辑放到组件顶层，或者用 useEffect 监听 searchResults 的变化，就能拿到更新后的值：

// 方式1：组件顶层打印，每次组件渲染都会输出最新状态
console.log('最新搜索结果：', searchResults)

const Home = () => {
  const [movieTitle, setMovieTitle] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  // 方式2：用useEffect监听searchResults变化
  useEffect(() => {
    console.log('searchResults已更新：', searchResults)
  }, [searchResults])

  // 剩余原有代码保持不变
  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);
        });
  };

  return(
    <div>
      <p>Home page</p>
      <TextField defaultValue="Movie" onChange={(e) => handleChange(e)}/>
      <button onClick={getMovieData}/>
    </div>
  );
}

额外优化建议 #

• 给异步请求增加错误捕获逻辑，避免请求失败、无匹配搜索结果时出现异常：

Axios.get(apiUrl)
  .then((res) => {
    // 无搜索结果时Search字段不存在，兜底设置为空数组
    setSearchResults(res.data.Search || []);
  })
  .catch(err => {
    console.error('搜索请求失败：', err)
    setSearchResults([])
  })

• 给按钮补充文字内容，避免页面显示空白无提示的按钮：

<button onClick={getMovieData}>搜索电影</button>

内容的提问来源于stack exchange，提问作者Caio Ishikawa