使用 React Hooks 返回动态创建的嵌套 object 的先前 state？

Question

我有一个 state object 我想动态创建一个密钥和一个 object 在密钥内。 它必须是 object，因此它对于父组件是动态的，并返回之前的 state。 Key是基于父组件的动态的。 setState现在按预期工作，创建 state 的动态部分，但是，在嵌套的 object 中返回 state 是我感到困惑的地方。 state 现在覆盖了之前的 state。

这是一些代码...

import React, { useState, useCallback } from "react";
import { FormGroup, CustomInput } from "reactstrap";
import UniqueString from "unique-string";

function Ratings({ parentCheckedGood, parentCheckedNA, question, section }) {
  const [state, setState] = useState({});
  //THE ISSUE IS INSIDE THIS ONCHANGE FUNCTION
  const onChange = useCallback(
    (e) => {
      const { name, value } = e.target;
      // The state structure works as expected but getting the previous nested state is the issue
      setState((state) => ({
        ...state,
        [section]: { ...state[section], [question]: value },
      }));
    },
    [section, question]
  );
  console.log(state);
  const string = UniqueString();
  return (
    <div>
      <FormGroup required>
        <div>
          <CustomInput
            // checked={parentCheckedGood}
            onChange={onChange}
            type="radio"
            id={string + "1"}
            name={question}
            value="Good"
            label="Good"
          />
          <CustomInput
            onChange={onChange}
            type="radio"
            id={string + "2"}
            name={question}
            value="Fair"
            label="Fair"
          />
          <CustomInput
            onChange={onChange}
            type="radio"
            id={string + "3"}
            name={question}
            value="Poor"
            label="Poor"
          />
          <CustomInput
            // checked={parentCheckedNA}
            onChange={onChange}
            name={question}
            type="radio"
            id={string + "4"}
            value="N/A"
            label="N/A"
          />
        </div>
      </FormGroup>
    </div>
  );
}

export default Ratings;

编辑：

对于任何需要 state 示例的人。 state 结构如下所示：这只是一个示例，您不能使用点符号访问它。

state = {
    section: {name: value}
  }

回答：

在做了一些调试之后，我发现我所拥有的是正确的方法。 我在与 setState 冲突的父级中有另一个 onChange function。 如果有人正在寻找创建 state 的动态方法，这可能是最好的方法。 无需创建额外的 setStates。

Answer 1

所有 customInput 共享相同的 state； 如果子组件返回具有相同密钥的 state，它们将覆盖前一个；