我创建了一个货币转换器,但在控制台中出现警告
Warning: The value prop supplied to <select> must be a scalar value if multiple is false.
Check the render method of Row.
at select
at div
at Row (http://localhost:3000/static/js/main.chunk.js:930:5)
at form
at div
at App (http://localhost:3000/static/js/main.chunk.js:192:101)
使用multiple=true
对我来说不太好,因为它显示了一些选项。除了这个警告之外,一切都很好。我该如何解决这个问题?App.js
import React, {useState, useEffect} from 'react';
import './App.css';
import Row from './row/Row'
const App = () => {
const [selectCurrency, setSelectCurrency] = useState()
const [fromCurrency, setFromCurrency] = useState()
const [toCurrency, setToCurrency] = useState([])
const [amount, setAmount] = useState(1)
const [amountCurrency, setAmountCurrency] = useState(true)
const [exchangeRate, setExchangeRate] = useState()
let toAmount, fromAmount
if(amountCurrency){
fromAmount = amount
toAmount = amount * exchangeRate
} else{
toAmount = amount
fromAmount = amount / exchangeRate
}
useEffect(() => {
fetch(`https://api.exchangerate.host/latest`)
.then(res => res.json())
.then(data => {
setSelectCurrency([data.base, ...Object.keys(data.rates)])
setFromCurrency(data.base)
setToCurrency(Object.keys(data.rates)[0])
setExchangeRate(data.rates[Object.keys(data.rates)[0]])
})
}, [])
useEffect(() => {
if(fromCurrency && toCurrency){
fetch(`https://api.exchangerate.host/convert?from=${fromCurrency}&to=${toCurrency}`)
.then(res => res.json())
.then(res => setExchangeRate(res.info.rate))
}
}, [fromCurrency, toCurrency])
const onFromChangeAmount = (e) => {
setAmount(e.target.value)
setAmountCurrency(true)
}
const onToChangeAmount = (e) => {
setAmount(e.target.value)
setAmountCurrency(false)
}
return(
<div>
<form >
<Row
selectCurrency={selectCurrency}
currency={fromCurrency}
onChangeCurrency={e => setFromCurrency(e.target.value)}
amount={fromAmount}
onChangeAmount={onFromChangeAmount}
/>
<Row
selectCurrency={selectCurrency}
currency={toCurrency}
onChangeCurrency={e => setToCurrency(e.target.value)}
amount={toAmount}
onChangeAmount={onToChangeAmount}
/>
</form>
</div>
)
}
export default App;
Row.js
import React from 'react';
function Row(props){
const {
currency,
name,
selectCurrency,
onChangeCurrency,
amount,
onChangeAmount
} = props
return(
<div id={name}>
<input type="number"
className="inp"
value={amount ? amount : ''}
onChange={onChangeAmount}
/>
<select value={currency}
onChange={onChangeCurrency}
>
{selectCurrency && selectCurrency.map((el, i) => {
return <option key={i}>{el}</option>
})}
</select>
</div>
)
}
export default Row;
1条答案
按热度按时间nvbavucw1#
我发现了我的错误:在prop toCurrency 中,向Row.js传递了空数组。