useContext 不在同一个渲染上更新

Question

我遇到了一个问题，我需要更新我的 useContext 中的名称，然后立即对照我的代码的另一部分检查它。虽然当我对照另一部分检查时，上下文中的名称值仍然为空。

所以这是我的上下文文件...

export const UserContext = createContext();

function UserContextProvider(props) {

    const [user, setUser] = useState({
        name: '',
        email: ''
    });

    function updateUser(field, value) {
        return new Promise((resolve, reject) => {
            setUser((prevValue) => {
                return {...prevValue, [field]: value}
            })
            resolve();
        })
        
    }

    return (
        <UserContext.Provider value={{user, updateUser}}>
            {props.children}
        </UserContext.Provider>
    )
}

这就是我想要运行的...

const { user, updateUser } = useContext(UserContext);    
    async function method(event) {
         event.preventDefault();

        await updateUser("name", "Shaun")
        console.log(user);
    }

我也尝试过使用 async 和 await，但也没有用

我已经在我的代码框中重新生成了这个问题：https://codesandbox.io/s/youthful-smoke-fgwlr?file=/src/userContext.js

Answer 1

在await updateUser("name", "Shaun") 中等待只是等待return new Promise((resolve, reject) 的承诺，而不是等待setUser，setUser 是异步函数（不是承诺）。因此，如果您想检查 get latest user 您需要在 App.js 中的另一个 useEffect 中检查它

useEffect(() => {
  console.log(user);
}, [user]);

Answer 2

简单地说：你不能按照你的想法去做。请注意，user 是一个常量。在updateUser 中调用setUser 不会改变user 仍然绑定到与之前相同的值这一事实。在执行组件的渲染函数期间，绝不会重新分配 user（如果是，您会收到错误，因为它是一个 const）。 user 不会改变，直到下一次刷新组件并再次调用 useState（考虑到您刚刚调用 setUser，这将很快）。

也就是说，我不确定在调用setUser 后检查它是否真正有意义。你已经知道用户的名字应该是 Shaun，所以如果你需要这个值来做某事，你已经有了它；检查它是否已分配给user 根本没有必要或有用。如果您希望 updateUser 函数可能会更改您传递的值，并且您需要验证该值是否正确，则应该让您的异步函数返回该值。然后，您可以在承诺解决后检查该值。也就是说，任何像 probably 这样的检查都应该存在于您的 updateUser 函数中；在调用 setUser 之后尝试检查或验证它似乎是一种反模式。