reactjs 在useEffect - React 18.2.0中成功提取后，无法设置帖子(帖子是使用useState的状态)

ymzxtsji 于 2023-01-08 发布在 React

关注(0)|答案(2)|浏览(129)

我已成功从useEffect挂钩内的“www.example.com“获取帖子数据https://jsonplaceholder.typicode.com/posts，即响应已成功记录到控制台，数据属性包含数据（帖子），类似地，response.data也已记录到控制台，包含实际帖子数据，但我无法通过使用useState挂钩提供的setPosts设置程序将获取的帖子设置为帖子状态。成功地取得了职位，我的职位状态是空数组[]和用户界面也没有显示任何职位。我正在使用Reactv 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;

我已成功从useEffect挂钩内的“www.example.com“获取帖子数据https://jsonplaceholder.typicode.com/posts，即响应已成功记录到控制台，数据属性包含数据（帖子），类似地，response.data也已记录到控制台，包含实际帖子数据，但我无法通过使用useState挂钩提供的setPosts设置程序将获取的帖子设置为帖子状态。成功获取帖子，我的帖子状态为空数组[]，并且UI未显示任何帖子。

reactjs

来源：https://stackoverflow.com/questions/75033897/unable-to-set-posts-posts-is-a-state-using-usestate-after-fetching-them-succes

2条答案

按热度按时间

cbeh67ev1#

jsx中缺少return部分

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>

赞(0）回复(0）举报 2023-01-08

6jygbczu2#

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

赞(0）回复(0）举报 2023-01-08

我来回答

reactjs 在useEffect - React 18.2.0中成功提取后，无法设置帖子(帖子是使用useState的状态)

2条答案

相关问题

热门标签

最新问答