reactjs - 无法将 React 状态设置为对象数组
问题描述
我正在尝试通过 Axios 获取请求将 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>
);
};
解决方案
setState
在将状态变量设置为异步后,您无法立即记录它。您可以在 a 中记录更新的状态useEffect
:
import {useEffect} from 'react'
useEffect(() => {
console.log(searchResults);
}, [searchResults])
推荐阅读
- ios - 如果我将 iOS 应用程序从 XCode 发布到我的 iPad,它会在 iPad 中保留多少天?
- list - 过滤 [Maybe a] 并丢弃 Nothing 值
- java - Java 使 FileReader 成为成员变量
- mysql - 当数字偏离平均值时,需要在列中显示正面和负面消息
- angular - Angular 2- ngxDaterangepickerMd 多语言
- javascript - 具有双索引的Javascript数组
- spring-boot - Swagger 3 和 Java >= 9 拼图
- python-3.x - AttributeError:'CallbackContext'('Update')对象没有属性'message'
- javascript - 在javascript中通过引用更改对象
- python - How to filter rows with specified conditions in a dataframe and put them in a new dataframe?