React 状态改变时输入不变

Question

我有一个带有 3 个选项和 3 个文本输入的选择输入。ideia 是：我选择所需的属性（例如：A），并且只有此输入对用户可用，其他的将被禁用。然后我单击禁用输入下方的“计算”按钮，根据我插入的属性显示该输入的计算值（在本例中，只是为了简化，此值始终为 123）。import React, { useState } from "react";import "./styles.css";export default function App() {  const [models, setModels] = useState([    { name: "A", value: undefined },    { name: "B", value: undefined },    { name: "C", value: undefined }  ]);  const onModelChange = (e) => {    const { name, value } = e.target;    let newModels = models;    newModels[      newModels.findIndex((model) => model.name === name)    ].value = parseInt(value, 10);    setModels(newModels);  };  const onCalculate = (modelName) => {    let newModels = models;    newModels[      newModels.findIndex((model) => model.name === modelName)    ].value = 123;    console.log(newModels);    setModels(newModels);  };  const [selectedOption, setSelectedOption] = useState("A");  const handleChange = (e) => {    setSelectedOption(e.target.value);  };  return (    <div className="App">      <select onChange={handleChange} value={selectedOption}>        <option value="A">A</option>        <option value="B">B</option>        <option value="C">C</option>      </select>      <br />      {models.map((model) => (        <div key={model.name}>          <input            placeholder={model.name}            name={model.name}            label={model.name}            width="100px"            type="number"            min="0"            max="1000"            value={model.value}            onChange={onModelChange}            disabled={selectedOption !== model.name}          />我的问题是输入中的值来自一个名为“模型”的状态变量，在我单击“计算”后，这个变量发生了变化，正如您在控制台上看到的那样，但该值未显示在禁用的输入中.有谁知道如何解决这一问题？codesandbox 链接：https://codesandbox.io/s/affectionate-ives-uytgy ?file=/src/App.js

Answer 1

问题

您正在改变状态数组并更新它。React 不知道状态是否已经改变，因为你传递的是对 setState 的旧引用。

解决方案

1. 首先，获取状态数组的副本。

2. 改变状态数组的复制版本。

3. 使用新的更新变异数组更新您的状态。

 const onModelChange = e => {

    const { name, value } = e.target;

    let newModels = [...models];

    newModels[

      newModels.findIndex(model => model.name === name)

    ].value = parseInt(value, 10);

    setModels(newModels);

  };

  const onCalculate = modelName => {

    let newModels = [...models];

    newModels[

      newModels.findIndex(model => model.name === modelName)

    ].value = 123;

    setModels(newModels);

  };

您可以在此示例中检查类似的问题：- https://stackblitz.com/edit/react-osxmnr