reactjs 警告:如果'multiple'为false,则提供给的'value' prop< select>必须是标量值

wbgh16ku  于 2022-12-26  发布在  React
关注(0)|答案(1)|浏览(256)

我创建了一个货币转换器,但在控制台中出现警告

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;
nvbavucw

nvbavucw1#

我发现了我的错误:在prop toCurrency 中,向Row.js传递了空数组。

相关问题