React中Option标签值不更新，模态窗口无法获取实时价格问题

问题描述 #

我维护两个价格状态变量，需要将实时价格传递到模态窗口，但目前模态框只能获取一次初始值，后续价格每10秒自动更新时，模态框内的数值不会同步变化。只有在BUY按钮的显示文本中手动添加Math.Random()时，按钮上的数字才会变化。

相关代码 #

Select组件代码 #

import React, { useState, useEffect } from "react";
import './select.css'
import Modalbuy from "../popup/Modalbuy"
import Modalsell from "../popup/Modalsell"

const Select = () => {
    const [value, setValue] = useState(undefined);
    const [usdrub, setUsdrub] = useState(Math.random() * (64-61) + 61);
    useEffect(() => {
      const interval = setInterval(() => {
        setUsdrub(Math.random() * (64-61) + 61);
      }, 10000);
      return () => clearInterval(interval);
    }, [])

    const [rubusd, setRubusd] = useState(Math.random() * 2);
    useEffect(() => {
      const interval = setInterval(() => {
        setRubusd(Math.random() * 2);
      }, 10000);
      return () => clearInterval(interval);
    }, [])

    function changeSelect(event) {
        setValue(event.target.value)
    }
    const [modalBuyActive, setModalBuyActive] = useState(false)
    const [modalSellActive, setModalSellActive] = useState(false)

    return (
        <div>
        <select onChange={changeSelect}>
          <option></option>   
        <option name="USD/RUB" value={usdrub}>USD/RUB</option>
        <option name="RUB/USD" value={rubusd}>RUB/USD</option>
        </select>
        <div className="Curr">
          <div className="Buy" name="buy"> 
            <button className="Buy" type="btn" onClick={() => setModalBuyActive(true)}>
              BUY {value ? Number(value) + Math.random() * 1 : ""} 
            </button>
            <Modalbuy active={modalBuyActive} setActive={setModalBuyActive} price={value}/>
          </div>
          <div className="Sell" name="sell">
            <button className="Sell" type="btn"  onClick={() => setModalSellActive(true)}>
              SELL {value ? value : ""}
            </button>
            <Modalsell active={modalSellActive} setActive={setModalSellActive} price={value}/>
          </div>
        </div>
        </div>
    )
}

更新：Modalbuy组件代码 #

import React, { useState } from "react";
import "./modal.css";
import { DataBuyContext } from "../../page/page";

const Modalbuy = (props) => {
  const {active, setActive, price} = props
  const [inputVolume, setInputVolume] = useState("")
  
  function saveInput(event) {
    setInputVolume(event.target.value)
  }

  const {dataBuy, setDataBuy} = React.useContext(DataBuyContext)
  
  function addBuy() {
    setDataBuy([...dataBuy,{
      side: "BUY", 
      price: price, 
      volume: inputVolume,
      timestamp: new Date().toLocaleTimeString()
    }])
  }

  return (
    <div className={active ? "modal active" : "modal"} onClick={() => setActive(false)}>
      <div className="modal__content" onClick={e => e.stopPropagation()}>
        <header>Make order</header>
        <p>BUY {price}</p>
        <input placeholder="Volume" value={inputVolume} onChange={saveInput}></input>
        <div>
          <button onClick={addBuy}>Ok</button>
          <button onClick={() => setActive(false)} >Cancel</button>
        </div>
      </div>
    </div>
  )
}

export default Modalbuy;

解决方案 #

核心问题 #

1. 下拉选项的value虽绑定了状态，但value状态仅在用户手动切换下拉时更新，价格自动刷新时不会同步更新value
2. 模态框接收的price依赖value，因此无法获取最新价格

具体修复步骤 #

1. 同步价格更新到value状态
   添加一个useEffect监听usdrub和rubusd的变化，自动更新当前选中币种的value：

useEffect(() => {
  const selectEl = document.querySelector('select');
  if (!selectEl || !selectEl.value) return;
  
  const selectedOption = selectEl.options[selectEl.selectedIndex];
  const optionName = selectedOption.getAttribute('name');
  
  if (optionName === 'USD/RUB') {
    setValue(usdrub);
  } else if (optionName === 'RUB/USD') {
    setValue(rubusd);
  }
}, [usdrub, rubusd]);

2. 移除按钮上的冗余随机数
   BUY按钮里的Math.random()是临时的，现在value会自动同步最新价格，直接显示格式化后的价格即可：

<button className="Buy" type="btn" onClick={() => setModalBuyActive(true)}>
  BUY {value ? Number(value).toFixed(2) : ""}
</button>

3. 确保模态框实时接收最新值
   由于value已实时同步价格，传给Modalbuy的price属性会自动更新，模态框内的price显示也会随之变化。

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