Question

我有一个带有3个选项和3个文本输入的选择输入。想法是：我选择所需的属性（例如：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}
          />
          <br />
          <button
            name="refresh"
            width="24px"
            height="24px"
            onClick={() => onCalculate(model.name)}
            disabled={selectedOption === model.name}
          >
            Calculate
          </button>
          <br />
        </div>
      ))}
    </div>
  );
}

我的问题是输入中的值来自状态变量，称为“模型”，在单击“计算”后，此变量已更改，如您在控制台上看到的那样，但该值未显示在禁用的输入。

有人知道如何解决此问题吗？

链接到codeandbox：https://codesandbox.io/s/affectionate-ives-uytgy?file=/src/App.js

Answer 1

问题

您正在突变状态数组并对其进行更新。由于您要将旧的引用传递给setState，因此React不知道状态是否已更改。

解决方案

首先，获取副本状态数组。
更改状态数组的复制版本。
使用新的更新的变异数组更新状态。

 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

React状态更改时输入未更改

1 个答案:

问题

解决方案