React货币转换器中<select>组件value属性警告问题求助

问题描述 #

控制台出现如下警告：

Warning: The value prop supplied to 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; 解决方案 # 问题根源 # 初始化时toCurrency被设置为数组[]，而单选<select>的value属性要求必须是标量值（字符串、数字等单个值），数组不符合要求导致React抛出警告。 其他状态（selectCurrency、fromCurrency、exchangeRate）初始值为undefined，可能导致渲染初期出现值不匹配的情况，也会间接引发警告或计算异常。 修复步骤 # 修正toCurrency的初始值： 在App.js中，将const [toCurrency, setToCurrency] = useState([])改为const [toCurrency, setToCurrency] = useState('')，确保初始值是字符串类型的标量。 给其他状态设置合理初始值： selectCurrency初始化为空数组：const [selectCurrency, setSelectCurrency] = useState([])，避免渲染时因undefined导致map操作异常。 fromCurrency初始化为空字符串：const [fromCurrency, setFromCurrency] = useState('') exchangeRate初始化为1：const [exchangeRate, setExchangeRate] = useState(1)，避免计算金额时出现NaN。 Row组件中确保select的value始终为标量： 在Row.js的<select>标签中，将value={currency}改为value={currency || ''}，保证即使currency为undefined或空值时，传递的仍是有效的标量值。 修改后的关键代码片段 # App.js修改部分 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(1) // 其余代码保持不变 } Row.js修改部分 <select value={currency || ''} onChange={onChangeCurrency} > {selectCurrency.map((el, i) => { return <option key={i}>{el}</option> })} </select> 内容的提问来源于stack exchange，提问作者Shoshanna