0

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

这就是我试图构建调查的方式。

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,
  });
};

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

4

1 回答 1

0

我建议你阅读这篇文章我应该使用一个还是多个状态变量？

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

hooksetState返回的是一个替换操作，而不是类似于类组件方法的合并操作。useStatethis.setstate ()

拆分成独立的状态，不再使用扩展运算符（...）进行合并操作。执行 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...
于 2021-11-18T02:16:50.387 回答