javascript - 如何创建动态变量并通过 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 钩子(Hook)“useState()”

下面是我的查询的虚拟代码。我将在“data”参数中发送step_1和step_2。

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

所以问题是如何创建动态变量并通过 useState() 使用它们，这种方法是否错误或者我没有正确理解钩子(Hook)概念。

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