如何在不自己手动设置每个变量的情况下管理许多动态变量的状态

Question

我是 React 新手，我有 1000 多个动态创建的输入字段。如何在不自行设置初始状态的情况下管理输入值。输入元素在 ToggleSwitch 组件中生成。关于如何动态设置所有值，您有什么建议吗？

  const displayConsentInfo = () => {
    return (
      <ul>
        <h3>Purposes</h3>
        {Object.keys(data.purposes).map((keyName) => (
          <li key={data.purposes[keyName].id}>
              <h5>{data.purposes[keyName].name}</h5>
              <p>{data.purposes[keyName].description}</p>
              <div class={style.consent_box}>
                  <span class={style.toggle_option}>Consent</span>
                  <ToggleSwitch checked={false} name={'purposesConsent'} onClick={sendData} dataID={data.purposes[keyName].id} />
              </div>

              {data.purposes[keyName].id != 1 &&
                <div class={style.consent_box}>
                    <span class={style.toggle_option}>Legitimate interest</span>
                    <ToggleSwitch checked={true} name={'purposesLegitimate[]'} />
                </div>
              }
          </li>
        ))}
      </ul>
    )
  }

这只是我的代码片段，我还为其他选项提供了一些动态生成的输入。

Answer 1

试试这个

在你的函数组件中添加一个useState。

import { useState } from "react";

const [data, setData] = useState(data.purposes);

onChangeHandler = (e) => {
        setData((data) =>  Object.assign(data, e.target.name, e.target.value))

更改您的 sendData 函数以发送 data 对象

sendData = () => {
  // callApi(<url>, data);
}

在您的输入字段中添加一个 onChange 回调。

<ToggleSwitch  
    onChange={onChangeHandler} 
    name={keyName}
    onClick={sendData}/>

如何在不自己手动设置每个变量的情况下管理许多动态变量的状态

How to manage state of many dynamic variables without manually setting each and every variable on my own

state

input

reactjs