如何根据同级组件的值更改一个 React 组件的状态？

Question

我正在尝试在 React 中构建一个具有一些自动填充功能的表单。我正在尝试创建基于 ReplacementCost 值将 LossOver50k 的值“锁定”为“是”或“否”的能力，以防止输入错误。我现在的代码是

import React, { useState } from "react";
import ReplacementCost from "./ReplacementCost";
import LossOver50K from "./LossOver50K";

const LossAmount = () => {
  const [replacementCost, setReplacementCost] = useState("");
  const [highValue, setHighValue] = useState("No");

  const handleChange = (newReplacementCost) => {
    setReplacementCost(newReplacementCost);
    if (replacementCost >= 50000) {
      setHighValue("Yes");
    }
  };

  // const changeHighValue = (newHighValue) => {
  //   setHighValue(newHighValue);
  // };

  return (
    <div>
      <ReplacementCost value={replacementCost} onChange={handleChange} />
      <LossOver50K value={highValue} />
    </div>
  );
};

export default LossAmount;

我的评论文章在 LossOver50k 组件上作为 onChange 处理程序工作，但如果 R​​eplacement Cost 的值等于或大于 50,000，我正在尝试操纵 LossOver50k 的值。当我通过将道具向下传递给子组件直接输入值时，这些组件中的每一个都成功地更新了它们的状态。有什么想法吗？

TIA！

Answer 1

您的条件应该是最新的值，而不是过时的值（因为setState 是异步的）：

const handleChange = (newReplacementCost) => {
    setReplacementCost(newReplacementCost);
    if (newReplacementCost >= 50000) {
      setHighValue("Yes");
    }
  };