选项标记中的值不会更改

Question

我有两个变量，它们都有价格。我需要传递一个值{price}到模态窗口，但我得到一个值一次，它们永远不会改变，它们应该每10秒改变一次(购买按钮上的数字只有当我每10秒添加Math.Random()时才会改变)

import React, {useState} from "react";
import './select.css'
import Modalbuy from "../popup/Modalbuy"
import Modalsell from "../popup/Modalsell"
import { useEffect } from "react";
const Select = () => {


const [value, setValue] = useState(undefined || Number);
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.js

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)
console.log(inputVolume)
}
const {dataBuy, setDataBuy} = React.useContext(DataBuyContext)
function addBuy() {
setDataBuy([...dataBuy,{side: "BUY", price:  price, volume: inputVolume,timestamp: new Date().toLocaleTimeString()}])
// console.log(dataBuy)
}

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;

Answer 1

像这样?

import React, { useState } from "react";
import { useEffect } from "react";
const popUpStyle = {
border: "1px solid black",
padding: "20px",
margin: "10px",
width: "100%",
height: "100%",
position: "fixed",
top: "0",
left: "0",
background: "white"
};
const Modalbuy = ({ active, setActive, price, currency }) => {
const logPriceString = () => {
console.log(`BUY ${price} ${currency}`)
}
return <>
{active && <div style={popUpStyle}>
BUY at Price: {price}
<br />
<br />
<button onClick={logPriceString} >Log Price String</button>
<br />
<br />
<button onClick={() => {
setActive(false);
}} > Close</button>
</div>}
</>
}
const Modalsell = ({ active, setActive, price, currency }) => {
const logPriceString = () => {
console.log(`SELL ${price} ${currency}`)
}
return <>
{active && <div style={popUpStyle}>
SELL at Price: {price}
<br />
<br />
<button onClick={logPriceString} >Log Price String</button>
<br />
<br />
<button onClick={() => {
setActive(false);
}} > Close</button>
</div>}
</>
}
export default function Select() {
const [currentCurrency, setCurrentCurrency] = useState(undefined || Number);
const [currentPrice, setCurrentPrice] = useState();
const USD_RUB_price = () => {
return Math.random() * (64 - 61) + 61
}
const RUB_USD_price = () => {
return Math.random() * 2
}
const refreshPrice = (currentCurrency) => {
if (currentCurrency === "USD/RUB") {
setCurrentPrice(USD_RUB_price());
}
else if (currentCurrency === "RUB/USD") {
setCurrentPrice(RUB_USD_price())
}
}
useEffect(() => {
const interval = setInterval(() => {
refreshPrice(currentCurrency);
}, 2000);
return () => clearInterval(interval);
}, [currentCurrency])
function changeSelect(event) {
setCurrentCurrency(event.target.value)
refreshPrice(event.target.value);
}
const [modalBuyActive, setModalBuyActive] = useState(false)
const [modalSellActive, setModalSellActive] = useState(false)
return (
<div>
<select onChange={changeSelect}>
<option></option>
<option value="USD/RUB">USD/RUB</option>
<option value="RUB/USD">RUB/USD</option>
</select>
<br />
<br />
<div className="Curr">
<div className="Buy" name="buy"> <button className="Buy" type="btn" onClick={() => setModalBuyActive(true)}>BUY {currentPrice} </button>
<Modalbuy active={modalBuyActive} setActive={setModalBuyActive} price={currentPrice} currency={currentCurrency} />
</div>
<div className="Sell" name="sell"><button className="Sell" type="btn" onClick={() => setModalSellActive(true)}>SELL {currentPrice}</button>
<Modalsell active={modalSellActive} setActive={setModalSellActive} price={currentPrice} currency={currentCurrency} />
</div>
</div>


</div>
)
}