Question

这是我的代码：

useEffect(() => {
    fetchPosts()
}, [])

const [posts, setPosts] = useState([])

const fetchPosts = async () => {
    const data = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
    const posts_data = await data.json()    
    setPosts(posts_data)
    console.log(posts)    
}

从console.log(posts)到[]，里面带有length: 0。但是，当我控制台日志posts_data时，它将为我提供从该api调用中获得的所有posts。 setPosts不能正常工作吗？

更新

我什至添加了

<div className="container-fluid mt-3">
    <h1 className="text-white">Posts</h1>
    {posts.map(post => {
        <p>asdasd</p>
    })}
</div>

它什么也不显示。

更新2

根据建议，我尝试获取父组件App.js上的数据，然后通过props将其发送到我的Posts.js组件：

useEffect(() => {
    fetchPosts()
}, [])

const [posts, setPosts] = useState([])

const fetchPosts = async () => {
    const data = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
    const posts_data = await data.json()    
    setPosts(posts_data) 
} 

return (
  <Router>
  <div className="container-fluid pt-5">
      <Navbar/>
      <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/posts" posts={posts} exact component={Posts} />
      </Switch>

在我的Post.js中：

function Posts(props) {
  return (
        <div className="container-fluid mt-3">
            <h1 className="text-white">Posts</h1>
            {props.posts.map(post => {
                return <p key={post.id}>Hello</p>
            })}
        </div>
    )
}

现在它给了我一个错误：

TypeError: Cannot read property 'map' of undefined

我真的不知道为什么我的第一个解决方案不起作用，因为前几天我使用了这段代码，并且可以完美地工作而没有任何问题。现在，它不存储任何内容（或者可能由于异步内容），不显示我从该api获取的所有数据。

Answer 1

setPosts异步设置数据。这就是为什么console.log语句甚至在setPosts完成设置获取的内容的工作之前就被执行的原因。您可以改为这样做。

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  useEffect(() => {
    fetchPosts();
  }, []);

  const [posts, setPosts] = useState([]);

  const fetchPosts = async () => {
    const data = await fetch(
      "https://jsonplaceholder.typicode.com/posts?_limit=10"
    );
    const posts_data = await data.json();
    setPosts(posts_data);
    setImmediate(() => {
      console.log(posts);
    })
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

更新：您可以执行此操作以映射帖子...

<div className="container-fluid mt-3">
    <h1 className="text-white">Posts</h1>
    <div>{posts && posts.map(post => {
        return <p>asdasd</p>
    })}</div>
</div>

useState异步问题（不更新/保存）

1 个答案: