React项目中点击按钮后两个组件值同步变化的问题求助

你两个组件都依赖QuotationContext中同一个saving.percentageDevolution状态字段，修改时会同步更新所有使用该字段的组件——这是React Context共享状态的特性，所以点击任意一个组件的按钮，两个文本框的内容都会一起变化。

方案1：使用组件本地状态（无需同步数值时） #

如果两个文本框的数值不需要互相影响，把状态从Context移到组件内部：

第一个组件修改后： #

const ProtectionAmountResponsive: React.FC<Props> = () => {
  // 用本地状态替代Context中的共享状态
  const [percentage, setPercentage] = useState(初始数值);
  const { saving } = useContext(QuotationContext)
  const [counter, setCounter] = useState<string[] | []>([])

  const buttonRight = () => {
    const filteredPercentages = filterPercentage(saving.yearSelected);
    const currentIndex = filteredPercentages.findIndex((item:any) => item.value === percentage.toString());

    if (currentIndex !== -1 && currentIndex > 0) {
      const newValue = parseInt(filteredPercentages[currentIndex - 1].value);
      setPercentage(newValue);
    }
    setIsLeftButtonActive(false);
    setIsrightButtonActive(true)
  }

  return <div>{percentage}</div>
}

第二个组件修改后： #

const CoverageDevolutionResponsive = () => {
  const [percentage, setPercentage] = useState(初始数值);
  const { saving } = useContext(QuotationContext)
  const [counter, setCounter] = useState<string[] | []>([])

  const buttonRight = () => {
    const filteredPercentages = filterPercentage(saving.yearSelected);
    const currentIndex = filteredPercentages.findIndex((item:any) => item.value === percentage.toString());

    if (currentIndex !== -1 && currentIndex > 0) {
      const newValue = parseInt(filteredPercentages[currentIndex - 1].value);
      setPercentage(newValue);
    }
    setIsLeftButtonActive(false);
    setIsrightButtonActive(true)
  }

  return <div>{percentage}</div>
}

方案2：在Context中拆分独立字段（需保留部分共享逻辑时） #

如果需要保留Context的其他共享数据，但两个文本框数值要独立，修改Context的状态结构，新增两个独立的百分比字段：

第一步：更新Context初始状态 #

假设你的QuotationContext初始状态结构如下，新增两个独立字段：

const initialState = {
  saving: {
    // 原有其他字段...
    protectionPercentage: 初始数值,
    coveragePercentage: 初始数值,
    // 可保留原percentageDevolution字段，或根据需求删除
  },
  setSaving: () => {}
}

第二步：修改第一个组件 #

const ProtectionAmountResponsive: React.FC<Props> = () => {
  const { saving, setSaving } = useContext(QuotationContext)
  const [counter, setCounter] = useState<string[] | []>([])

  const buttonRight = () => {
    const currentPercentage = saving.protectionPercentage;
    const filteredPercentages = filterPercentage(saving.yearSelected);
    const currentIndex = filteredPercentages.findIndex((item:any) => item.value === currentPercentage.toString());

    if (currentIndex !== -1 && currentIndex > 0) {
      const newValue = parseInt(filteredPercentages[currentIndex - 1].value);
      setSaving({ ...saving, protectionPercentage: newValue });
    }
    setIsLeftButtonActive(false);
    setIsrightButtonActive(true)
  }

  return <div>{saving.protectionPercentage}</div>
}

第三步：修改第二个组件 #

const CoverageDevolutionResponsive = () => {
  const { saving, setSaving } = useContext(QuotationContext)
  const [counter, setCounter] = useState<string[] | []>([])

  const buttonRight = () => {
    const currentPercentage = saving.coveragePercentage;
    const filteredPercentages = filterPercentage(saving.yearSelected);
    const currentIndex = filteredPercentages.findIndex((item:any) => item.value === currentPercentage.toString());

    if (currentIndex !== -1 && currentIndex > 0) {
      const newValue = parseInt(filteredPercentages[currentIndex - 1].value);
      setSaving({ ...saving, coveragePercentage: newValue });
    }
    setIsLeftButtonActive(false);
    setIsrightButtonActive(true)
  }

  return <div>{saving.coveragePercentage}</div>
}

内容的提问来源于stack exchange，提问作者user5798214