时间戳

首页 > 解决方案 > 当 React 状态改变时输入没有改变

javascript - 当 React 状态改变时输入没有改变

问题描述

我有一个带有 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>
  );
}

我的问题是输入中的值来自一个名为“模型”的状态变量，在我点击计算后，这个变量发生了变化，正如您在控制台上看到的那样，但该值未显示在禁用的输入中.

有谁知道如何解决这一问题？

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

标签： javascriptreactjsreact-hooks

解决方案

问题

你正在改变状态数组并更新它。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

推荐阅读