0

我遇到了一个问题，我需要更新我的 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

4

2 回答 2

0

await inawait updateUser("name", "Shaun")只是在return new Promise((resolve, reject)没有 await for时等待 Promise setUser，setUser是异步函数（不是 Promise）。因此，如果您想检查获取最新user信息，则需要在 App.js 中的另一个 useEffect 中检查它

useEffect(() => {
  console.log(user);
}, [user]);
于 2020-07-08T13:01:03.640 回答
0

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

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

于 2020-07-08T13:07:06.377 回答