如何在 React 状态中显示和更新深层嵌套值

Question

React 状态
const [config, setConfig] = useState([])（填充下面的可视化数据）

配置状态里面的数据
数据包括几个带有对象的深层嵌套数组

1. 我需要显示输入中的所有字段（我已经使用嵌套的 .map 函数完成了此操作）
2. 当用户在输入中输入任何自由文本时，它应该更新原始状态（配置）

实现这种行为的最佳做法是什么？目前我对如何通过输入字段更新值一无所知。

Answer 1

不确定这是否适合您，但您可以使用 Formik 之类的东西，它支持表单字段的路径。

<块引用>

要访问嵌套对象或数组，name 也可以接受类似 lodash 的点路径，如 social.facebook 或friends[0].firstName

示例：

import { Formik, Field } from 'formik';

function MyForm() {
    return (
        <Formik>
            <Field name="a.deeply.nested.path[0]" />
        </Formik>
    );
}