Formik 的 setFieldValue 不适用于来自 Context API 的值

Question

我在我的 React Native 应用程序中使用 AWS Amplify 和 Formik。有一个显示成员列表的屏幕，加载屏幕时，默认情况下会将当前用户添加到列表中。这是我之前拥有的并且运行良好（我可以在屏幕上的列表中看到当前用户）。

  useEffect(() => {
    if (values.members.length === 0) {
       Auth.currentAuthenticatedUser().then(user => {
         const owner: Member = {
           id: user.attributes.sub,
           name: user.attributes.name,
         };

         setFieldValue('members', [owner]);
       });
    }
  }, []);

但是，然后，我创建了一个 UserContext 并决定用来自 UserContext 的用户替换对放大函数 Auth.currentAuthenticatedUser() 的调用。这是新代码：

  const { user } = useContext(UserContext);

  useEffect(() => {
    if (values.members.length === 0) {
      const owner: Member = {
        id: user.attributes.sub,
        name: user.attributes.name,
      };

      console.log("Owner", owner); // This displays the current user in the console

      setFieldValue('members', [owner]);
    }
  }, []);

正如我在代码中评论的那样，console.log() 显示当前用户，因此 UserContext 工作正常，但由于某些原因 setFieldValue 不工作。有谁知道为什么会发生这种情况？

更新：

我想如果我把 setFieldValue() 放在 setTimeout 中的第二个代码中它会起作用。但是，在那种情况下，如果我将 useEffect(() => {}, []) 更改为 useEffect(() => {}, [user])，它不应该也有效吗？

Answer 1

这是我最后做的。我将此作为答案发布，但我仍在寻找关于为什么会发生这种情况的答案。

  const { user } = useContext(UserContext);
  const [owner, setOwner] = useState(null as Member | null);

  useEffect(() => {
    if (values.members.length === 0) {
      setOwner({
        id: user.attributes.sub,
        name: user.attributes.name,
      });
    }
  }, []);

  useEffect(() => {
    setFieldValue('members', [owner]);
  }, [owner]);

Answer 2

您的问题是因为 existing formik issue。因此，在修复之前，只需使用 setTimeout 或您提到的解决方案即可。

如果有用，还可以查看同一 link 中提到的其他一些替代方法。

Formik 的 setFieldValue 不适用于来自 Context API 的值

Formik's setFieldValue doesn't work with value coming from Context API

reactjs

react-native

formik

react-context