如何创建动态变量并将其与useState（）一起使用

Question

我有一个条件，我必须创建一个公共组件，该组件将在如下所示的不同位置使用。

步骤1

步骤2

在以上两个步骤中，我都使用相同的组件，只是所问的问题有所不同。

   stepOne: [
      {
        title: "Is your age less than 18 ?",
        name: "age",
        answer: 0
      }
    ],
   stepTwo: [
      {
        title: "Have you been to some trip previously ?",
        name: "trip",
        answer: 0
      },
      {
        title: "Do you like adventurous sports ?",
        name: "sportActive",
        answer: 0
      }
    ],

我已经成功地做到了这一点，但是有了类组件，但是现在我想使用react钩子“ useState（）”

以下是我查询的伪代码。我将在“数据”参数中发送step_1和step_2。

export function YesNo({ data, setAnswer }) {
  for(let i in data){
    const [---] = useState(data[i].answer);
  }

所以问题是如何创建动态变量并将其与useState（）一起使用，这是错误的方法还是我没有正确理解钩子概念。

Answer 1

您可以执行以下操作：

基本上，魔术线是这个[evt.target.name]: {

这是ES6中的一项新功能计算出的属性名称

关于它的更多https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  const [steps, setSteps] = useState({});

  function onClick(evt) {
    setSteps({
      [evt.target.name]: {
        value: evt.target.name
      }
    });
  }

  console.log(steps);

  return (
    <div className="App">
      <button onClick={onClick} name="step-one">
        ste one
    </button>
      <button onClick={onClick} name="step-two">
        ste two
    </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

您在SO上找不到几种方法，一种方法是用单个对象管理状态：

export function YesNo({ data: initialState }) {
  const [state, setState] = useState(initialState);

  const onChangeStepOne = ({ title, name, answer }) => {
    setState(prev => ({ ...prev, stepOne: { title, name, answer } }));
  };

  const onChangeStepTwo = stepTwoProps => {
    setState(prev => ({ ...prev, stepTwo: [...stepTwoProps] }));
  };

  return <>...</>;
}

您的示例将不起作用，因为根据Rules of Hooks，您不能在循环内调用钩子。

仅在顶层调用Hooks。不要在循环，条件或嵌套函数中调用Hook。