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 的旧引用。解决方案首先，获取状态数组的副本。改变状态数组的复制版本。使用新的更新变异数组更新您的状态。&nbsp;const onModelChange = e => {&nbsp; &nbsp; const { name, value } = e.target;&nbsp; &nbsp; let newModels = [...models];&nbsp; &nbsp; newModels[&nbsp; &nbsp; &nbsp; newModels.findIndex(model => model.name === name)&nbsp; &nbsp; ].value = parseInt(value, 10);&nbsp; &nbsp; setModels(newModels);&nbsp; };&nbsp; const onCalculate = modelName => {&nbsp; &nbsp; let newModels = [...models];&nbsp; &nbsp; newModels[&nbsp; &nbsp; &nbsp; newModels.findIndex(model => model.name === modelName)&nbsp; &nbsp; ].value = 123;&nbsp; &nbsp; setModels(newModels);&nbsp; };您可以在此示例中检查类似的问题：- https://stackblitz.com/edit/react-osxmnr