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

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

1 个答案: