React 受控组件无法设置更改文本输入答案

【问题标题】：React controlled component unable to set on change text inputReact 受控组件无法设置更改文本输入
【发布时间】：2021-09-02 05:39:10
【问题描述】：

这是一个小的功能组件。列表在输入中呈现。尝试更改密钥，但它起作用了。我在反映输入文本更改时遇到问题。

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [list, setList] = useState([
    { id: 1, text: "abc" },
    { id: 1, text: "zxy" }
  ]);

  const setText = (e, id) => {
    setList((old) => {
      old[id].text = e.target.value;
      console.log(old)
      return old;
    });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Edit to see some magic happen!</h2>
      {list.map((li, index) => (
        <input
          key={index}
          value={li.text}
          onChange={(e) => setText(e, index)}
        />
      ))}
    </div>
  );
}

const { useState } = React;

function App() {
  const [list, setList] = useState([
    { id: 1, text: "abc" },
    { id: 1, text: "zxy" }
  ]);

  const setText = (e, id) => {
    setList((old) => {
      old[id].text = e.target.value;
      console.log(old)
      return old;
    });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Edit to see some magic happen!</h2>
      {list.map((li, index) => (
        <input
          key={index}
          value={li.text}
          onChange={(e) => setText(e, index)}
        />
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app-container"));

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="app-container"></div>

【问题讨论】：

标签： javascript arrays reactjs react-hooks frontend

【解决方案1】：

你可以试试这个：

setList((old) => {
  return old.map((item, index) =>
    index === id ? { ...item, text: e.target.value } : item
  );
});

【讨论】：

虽然这个答案提供了一个解决方案，但它并没有解释为什么问题中的代码不起作用。一个好的答案可以让提问者了解出了什么问题。这个答案只给出了一个解决方案，但没有解释为什么这是正确的。

【解决方案2】：

在这种情况下，您需要根据 Id 或其他唯一字段键入的匹配对象更新列表字段（文本）。

export default function App() {
  const [list, setList] = useState([
    { id: 1, text: "" },
    { id: 1, text: "" }
  ]);

  const setText = (e, id) => {
    const { value } = e.target;
    setList((lists) => lists?.map((list, index) =>
        index === id ? { ...list, text: value } : list
      ));
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Edit to see some magic happen!</h2>
      {list.map((li, index) => (
        <input
          key={index}
          value={li.text}
          onChange={(e) => setText(e, index)}
        />
      ))}
    </div>
  );
}

Live demo

【讨论】：

【解决方案3】：

试试这个：

import { useState } from "react";

export default function App() {
  const [list, setList] = useState([
    { id: 1, text: "abc" },
    { id: 1, text: "zxy" }
  ]);

  const setText = (e, id) => {
    var oldList = [...list];
    oldList[id].text = e.target.value;
    setList(oldList);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Edit to see some magic happen!</h2>
      {list.map((li, index) => (
        <input
          key={index}
          value={li.text}
          onChange={(e) => setText(e, index)}
        />
      ))}
    </div>
  );
}

【讨论】：