React 18.2.0中useEffect获数据后无法更新useState的posts状态

你的代码存在两个关键问题，导致了当前的现象：

1. 控制台打印posts为空是setState异步特性导致 #

setPosts 是异步更新状态的，调用后当前作用域内的 posts 变量不会立即更新，所以你紧接着打印的还是初始的空数组。这是React的正常机制，状态实际上已进入更新队列，若要验证状态是否真的更新，可以在组件顶层添加打印，或者用useEffect监听posts变化：

useEffect(() => {
  console.log("更新后的posts:", posts)
}, [posts])

2. UI不渲染是因为map回调未返回JSX元素 #

你在 posts.map 的回调中编写了JSX，但未明确返回它。箭头函数的隐式返回需要用圆括号包裹JSX，或者显式添加 return 关键字，否则回调函数无返回值，React不会渲染任何内容。

修改后的完整代码 #

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")
      const data = response.data
      setPosts(data)
    })()
  },[])

  return (
    <div className="App">
      <ul>
        {/* 用圆括号实现箭头函数隐式返回JSX */}
        {posts.map(post => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

另外补充：原代码直接将 <li> 放在 <div> 下不符合HTML规范，修改后的代码将所有列表项包裹在 <ul> 中，更符合语义化要求。

内容的提问来源于stack exchange，提问作者Waseem Abbas