React Hooks 在 Table 中修改数组

Question

在将 table 渲染为 table 后，我在使用 useState 修改数组中的值时遇到问题。这是一个简单的例子：

  //The hook
  const [awayAbilityAdjust, setAwayAbilityAdjust] = useState([1, 1, 1, 1, 1]);

现在，我将其渲染为 Bootstrap 中的 table 和 Form:

                            <tr>
                              <td>Ability Adjust</td>
                              {awayAbilityAdjust.map((ability, index) => (
                                <td key={index}>                               
                                  <Form.Control
                                    size="sm"
                                    type="number"
                                    name="ability-input"
                                    step="0.1"
                                    value={ability}
                                    style={{
                                      width: "50px",
                                      backgroundColor: "#6d784b",
                                      color: "#ffff",
                                    }}
                                    min="0"
                                    max="10"
                                    onChange={updateHomeAbility(index)
                                    }
                                  />
                                  </td>
                              ))}
                            </tr>

这里是updateHomeAbility:


  const updateHomeAbility = (index) => (e) => {
    const updatedArray = [...homeAbilityAdjust];
    homeAbilityAdjust[index] = e.target.value;
    setHomeAbilityAdjust(updatedArray);
  };

然而，当我 select Form 上的向上和向下按钮时，这不会更改任何值。如何使用 useState?

修改这些值

Answer 1

您正在将 homeAbilityAdjust 复制到 updatedArray 后进行更新。您只需要更新 updatedArray 即可。

const updateHomeAbility = (index) => (e) => {
  const updatedArray = [...homeAbilityAdjust];
  updatedArray[index] = e.target.value;
  setHomeAbilityAdjust(updatedArray);
};

React Hooks 在 Table 中修改数组

React Hooks Modify Array In Table

javascript

reactjs

react-bootstrap

react-hooks