在 useEffect 中成功获取帖子后无法设置帖子（帖子是使用 useState 的状态）- React 18.2.0答案

【问题标题】：Unable to set posts (posts is a state using useState) after fetching them successfully in useEffect - React 18.2.0在 useEffect 中成功获取帖子后无法设置帖子（帖子是使用 useState 的状态）- React 18.2.0
【发布时间】：2023-01-07 01:52:17
【问题描述】：

我已经成功地从 useEffect 挂钩中的“https://jsonplaceholder.typicode.com/posts”获取帖子数据，即响应已成功记录到控制台，其中包含数据（帖子）的数据属性，同样，response.data 也被记录到带有实际帖子数据的控制台，但我无法通过使用 useState 钩子提供的 setPosts setter 将获取的帖子设置为帖子状态当我在成功获取帖子后将帖子记录到控制台时，我的帖子状态是空数组 [] 和用户界面也不显示任何帖子。我正在使用 React v 18.2.0 谁能帮我解决这个问题？下面是我的代码！

import './App.css';
import { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
const [posts, setPosts] = useState([])

useEffect(() => {
  (async () => {
    const response = await axios.get("https://jsonplaceholder.typicode.com/posts")
    console.log(response)
    const data = response.data
// data contains all the posts which are successfully logged
    console.log(data)

// Here posts is logged as empty array [].........why?
    setPosts(data)
    console.log("posts are", posts)

  })()
  

},[])

 return (
  <div className="App">
    {posts.map(post => {
      <>
        <li key={post.id}> {post.title}</li>
         <p>{post.body}</p>
      </>
    })}
  </div>
  );
}

export default App;

【问题讨论】：

由于存在陈旧的关闭案例，帖子将被记录为空数组。在您的函数运行一次后，您可以记录帖子并在那里获取数据。
@SnehilAgrahari 你能解释一下你的意思吗？
@DreamBold 是的，它们已被记录到控制台，但它们没有显示在 UI 中，您能否也指导我，我正在映射数据，正如您在我提供的代码中看到的那样
@DreamBold 非常感谢！有效！
@DreamBold 再次感谢！

标签： reactjs react-hooks axios fetch

【解决方案1】：

你错过了返回参与 jsx

import "./App.css";
import { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    (async () => {
      const response = await axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      );
      console.log(response);
      const data = response.data;
      // data contains all the posts which are successfully logged
      console.log(data);

      // Here posts is logged as empty array [].........why?
      setPosts(data);
      console.log("posts are", posts);
    })();
  }, []);

  return (
    <div className="App">
      {posts.map((post) => {
        return (
          <>
            <li key={post.id}> {post.title}</li>
            <p>{post.body}</p>
          </>
        );
      })}
    </div>
  );
}

export default App;

或者更好

<div className="App">
      {posts.map((post) => (
        <>
          <li key={post.id}> {post.title}</li>
          <p>{post.body}</p>
        </>
      ))}
    </div>

【讨论】：

【解决方案2】：

setposts 是一个 asynchronous 函数，您在更新值之前打印它们。并且你应该在大括号{}中的箭头函数体中使用return关键字，或者你应该将返回值包裹在括号()中。代码将如下所示：

import { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    (async () => {
      const response = await axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      );
      const data = response.data;
      setPosts(data);
    })();
  }, []);

  return (
    <div className="App">
      {posts.map((post, index) => (
        <>
          <li key={post.id}> {post.title}</li>
          <p >{post.body}</p>
        </>
      ))}
    </div>
  );
}

export default App;

您可以在这里查看现场演示：https://codesandbox.io/s/nostalgic-tdd-hwdjxk?file=/src/App.js:0-646

【讨论】：