如何通过Props提升更新React父组件状态？状态更新异常排查

问题原因 #

React的useState更新是异步批量执行的，调用setUsersList后，usersList并不会立刻同步更新。你在setUsersList之后直接执行console.log(usersList)，读取的还是更新前的旧状态值，并非状态没有更新。

解决方案 #

1. 用useEffect监听状态变化 #

如果需要在状态更新后执行操作（比如打印最新值），可以通过useEffect监听usersList的变化：

import React, { useState, useEffect } from "react";
import AddUser from "./components/Users/AddUser";
import UsersList from "./components/Users/UsersList";

function App() {
    const [usersList, setUsersList] = useState([]);

    useEffect(() => {
        console.log("最新的usersList:", usersList);
    }, [usersList]); // 仅当usersList变化时触发

    const addUserHandler = data => {
        console.log(data);
        setUsersList(prevState => {
            return [...prevState, data];
        });
    };

    return (
        <div>
            <AddUser onAddUser={addUserHandler}></AddUser>
            <UsersList users={usersList}></UsersList>
        </div>
    );
}

export default App;

2. 在更新逻辑中直接打印新状态 #

你可以在setUsersList的函数式更新里，先创建新状态并打印，再返回：

setUsersList(prevState => {
    const newUsersList = [...prevState, data];
    console.log("新状态:", newUsersList);
    return newUsersList;
});

额外说明：你的状态更新逻辑是正确的 #

你使用setUsersList(prevState => [...prevState, data])这种函数式更新的写法是规范且正确的，它能确保基于最新的前状态进行更新，避免异步更新带来的状态覆盖问题。实际上usersList已经在正常更新了，你可以通过查看<UsersList>组件是否能渲染新增的用户，来直观验证状态更新是否生效。

内容的提问来源于stack exchange，提问作者Adil Kashiev