根据不断变化的状态变量在反应中显示多个动态输入字段？

Question

所以，我正在构建我的第一个 React 应用程序，它连接到 Flask 后端。我有一个从 Python 程序中获取字典的特定功能组件，并且我已将其保存在状态变量中（使用 useState、setVariables 完成）。 对象的类型

{'A':'x', 'B':'y', 'C':2},

这些都是变量，每次渲染都需要是动态的，只基于这个对象。 根据这个对象的当前状态，我想在

中显示这个对象的键值对

<label>insertkey</label>
<input type="text" name = "insertkey" value=insertvalue/>

此外，我希望能够保存对这些值所做的任何更改，并将其写入状态变量，以便我可以将它们发送回我的 Flask 后端。

我尝试遍历每个，并插入如下：

const [fields, setFields] = useState({});
//intermediate code for fetching and setting the state 

useEffect(() => {
  for (const [key, value] of Object.entries(fields)) {
    console.log(`${key}:${value}`);
    insert = insert + `<label> ${key} </label> <input type = 'text' value = ${value} name = ${key} onChange=${changedData()}></input><br/>`
  }

  document.getElementById('fields_form').innerHTML = insert;
});
const changedData = (evt) => {
  setFields({ [evt.target.name]: evt.target.value });
  console.log(evt.target.value);
}

//some intermediate code

return (
  <div>
    <form onSubmit={submitFunction}>
      <p id='fields_form'>

      </p>
      <input type="submit" value="Submit"></input>
    </form>
  </div>
);

但是当我这样做时，状态被设置为“未定义”。

我很想听听一些实现这一点的方法。也许这是一个非常小的修复，我错过了它，或者也许有一种不同的方法可能更合适。

Answer 1

简单：

const Form = () => {
  const [values, setValues] = useState({});
  const onChange = (e) => {
    const name = e.target.name;
    let value = e.target.value;
    setValues({ ...values, [name]: value });
  };
  const onSubmit = (e) => {
    // send data or save it to local store
    api.send(values)
  };
  return (
    <form encType="multipart/form-data">
      <input
        type="text"
        name="email"
        value={value["email"]}
        onChange={onChange}
      />
      <input
        type="text"
        name="subject"
        value={value["subject"]}
        onChange={onChange}
      />
      <input
        type="text"
        name="body"
        value={value["body"]}
        onChange={onChange}
      />
      >
      <button type="submit" onClick={onSubmit}>
        Save
      </button>
    </form>
  );
};

export default Form;
console.log(values);

这是你的解决方案。

const [fields, setFields] = useState({});
const [values, setValues] = useState({});

// some fetch logic

// happens on loading some data
// for example data structure look's like:
// fetchedData = {
//   email: 'email@placeholder'
//   subject: 'subject placeholder'
//   body: 'body placeholder'
// }
useEffect(() => {
  if (fetchedData) {
    setFields(fetchedData)
  }
}, [fetchedData]);

// happens on fields changed
useEffect(() => {
  if (fields) {
    setValues(fields)
  }
}, [fields]);


const changedData = (evt) => {
  setValues({ ...values, [evt.target.name]: evt.target.value });
}

return (
  <div>
    <form onSubmit={submitFunction}>
      {Object.keys(fields).map(_ => (
        <input
          type="text"
          name={_}
          value={values[_]}
          onChange={changedData}
        />
      ))}
      <input type="submit" value="Submit"></input>
    </form>
  </div>
);