多嵌套受控组件 React

Question

我正在尝试找到一种更好的方法来一次处理我的所有调查数据。能够控制组件是个好主意，但我不知道尝试以这种方式控制它们是否是一种好习惯，或者我只是以错误的方式接近它。

这是我试图组织调查的方式。

const [survey, setSurvey] = useState({
   questionOne: { question: '', a: '', b: '', c: '' },
   questionTwo: { question: '', a: '', b: '', c: '' },
   questionThree: { question: '', a: '', b: '', c: '' }
});

这就是我尝试处理更改的方式：

const handleChange = (e, questionName) => {
  const { name, value } = e.target;
  console.log(questionName, name, value);
  setSurvey({
    ...survey,
    [questionName[name]]: value,
  });
};

如果有任何想法可以正确定位，我将非常感谢任何提示。 谢谢。

Answer 1

我建议你阅读这篇Should I use one or many state variables?

一般来说，更好的选择是将一个单一的、包罗万象的状态分解为单独的、较小的状态。 但是拆分取决于你的状态是否包含多个不相关的状态。如果状态代表一种数据模型，则不必拆分。

useState钩子返回的setState是replace操作，而不是类似于类组件的this.setstate ()方法的merge操作。

拆分成独立状态，合并操作不再使用扩展运算符(...)。执行 SET 操作而不是 MERGE 操作使代码更容易、更易读。

您可以使用与状态和逻辑相关的自定义钩子包。 自定义钩子可以给出更有意义的名称，有助于提高代码的可读性

所以你的代码可以重构为：

const [questionOne, setQuestionOne] = useQuestionOne();
const [questionTwo, setQuestionTwo] = useQuestionTwo();
const [questionThree, setQuestionThree] = useQuestionThree();

function useQuestionOne() {
  const [questionOne, setQuestionOne] = useState({a: '', b: '', c: ''})
  // other logic, useEffect(), resetQuestionOne, etc...
  return [questionOne, setQuestionOne]
}
// other custom hooks...