- 此问题在此处已有答案**:
The useState set method is not reflecting a change immediately(15个答案)
昨天关门了。
编辑:我创建了另一个react应用程序,重新开始,它工作了
我刚开始学习React,我正在独自学习this教程,这时React给了我一个错误消息"movie is not defined",所以我做了一些控制台日志记录,发现setMovies(data.Search);
实际上并没有将数组设置为useState。
function App() {
const [movies, setMovies] = useState([]);
useEffect(() => {
searchMovies("superman");
}, []);
const searchMovies = async (title) => {
const response = await fetch(`${API_URL}&s=${title}`);
const data = await response.json();
console.log(data.Search);
setMovies(data.Search);
console.log(movies);
};
return (
<div className='app'>
<h1>MovieLand</h1>
<div className='search'>
<input placeholder='Search for movies' value="Superman" onChange={() => { }} />
<img src={SearchIcon} alt="search" onClick={() => { }} />
</div>
{
movies?.length > 0
? (
<div className='container'>
{
movies.map((movie) => {
<MovieCard movie={movie} />
})
}
</div>
) : (
<div className='empty'>
<h2>No movies found</h2>
</div>
)
}
</div>
);
}
console. log(data. search)从api中抓取电影数组很好,但是当我尝试console. log(movies)时,它没有显示电影,而是给了我一个空数组。
3条答案
按热度按时间vfwfrxfs1#
setState是异步工作的,所以当你在setState之后用console.log记录你的状态时,你的console.log会记录你的initialState。
yvgpqqbh2#
正如@NgheMinh提到的,useState是异步的,您必须在useEffect中使用console.log。
但是代码中的实际问题是必须从map函数返回JSX组件。
2sbarzqh3#
试试这个