通过上下文共享多个值或一个对象

Question

我正在尝试与显示格式化内容“预览”的组件共享用户输入的表单数据。类似于 Whosebug 在此文本输入框下方显示降价预览，但在我的例子中，数据来自多个文本字段。

为了同步数据，我使用了上下文（根据我的研究，这似乎是正确的方法）但我的问题是我不确定如何共享多个值。

我认为每个表单字段都可以将数据作为对象的一部分发送，对于 receiving 组件，可能如下所示：

{
    firstname: (input from first name field component)
    address: (input from address field component)
    other: (input from other field component)
}

接收组件然后可以只读取此数据 {preview.firstname}。

在用户更新字段后设置值时，我使用展开运算符将现有数据合并到一个新对象中。

但是，我觉得这是一种有问题的方法。 linter 抱怨 preview 对象不在 useEffect 依赖项中，但如果我把它放在那里，它会创建一个无限渲染循环。

const [field] = useField('firstname');
const { preview, setPreview } = useContext(MyContext);

useEffect(() => {
    setPreview({
        ...preview,
        name: field.value
    });
}, [field.value, setPreview]);

我想我可以为每个表单字段创建不同的上下文，但这会变得冗长，而且我认为这也不是正确的解决方案。

我仍在学习 React/Contexts，所以我不确定“正确”的解决方案是什么。我是为每个要共享的“状态”值使用一个上下文，还是可以安全地共享一个“状态”对象？

Answer 1

您可以使用功能设置状态：

  setPreview(ps=>({
        ...ps,
        name: field.value
    }));

不再需要 preview 作为依赖。

通过上下文共享多个值或一个对象

Sharing multiple values or an object through contexts

reactjs