收到 `value` 属性的 NaN。如果这是预期的，请将值转换为字符串

Question

我收到此错误： 1.警告：收到 value 属性的 NaN。如果这是预期的，请将值转换为字符串。 2.警告：列表中的每个孩子都应该有一个唯一的“关键”道具。 这是我的代码：

const BASE_URL = `http://api.exchangeratesapi.io/latest?access_key=${ACCESS_KEY}`

const App = () => {
  const [ currencyOptions, setCurrencyOptions ] = useState([]);
  const [ fromCurrency, setFromCurrency] = useState()
  const [toCurrency, setToCurrency] = useState()
  const [exchangeRate, setExchangeRate] = useState()
  const [amount, setAmount] = useState(1)
  const [amountInFromCurrency, setAmountInFromCurrency] = useState(true)

  let toAmount, fromAmount
  if (amountInFromCurrency){
    fromAmount = amount
    toAmount = amount * exchangeRate
  } else {
    toAmount =amount
    fromAmount = amount / exchangeRate
  }

  useEffect(() => {
    fetch(BASE_URL)
      .then(res => res.json())  
      .then(data => {
           const firstCurrency = Object.keys(data.rates)[0]
           setCurrencyOptions([data.base, ...Object.keys(data.rates)])
           setFromCurrency(data.base)
           setToCurrency(firstCurrency)
           setExchangeRate(data.rates[firstCurrency])
       })
  }, [])

  useEffect(() => {
     if (fromCurrency != null && toCurrency != null) {
       fetch(BASE_URL)
     .then(res => res.json()) 
     .then(data => setExchangeRate(data.rates[toCurrency]))
    }   
  },[fromCurrency,toCurrency])

  function handleFromAmountChange(e) {
    setAmount(e.target.value)
    setAmountInFromCurrency(true)
  }

  function handleToAmountChange(e) {
    setAmount(e.target.value)
    setAmountInFromCurrency(false)
  }

  return (
    <>
      <h1>Convert</h1>
       <CurrencyRow 
       currencyOptions={currencyOptions}
       selectedCurrency={fromCurrency}
       onChangeCurrency={e => setFromCurrency(e.target.value)}
       onChangeAmount={handleFromAmountChange}
       amount = {fromAmount}
       />
      <div className="equals"> = </div>
       <CurrencyRow 
        currencyOptions={currencyOptions}
        selectedCurrency={toCurrency}
        onChangeCurrency={e => setToCurrency(e.target.value)}
        onChangeAmount={handleToAmountChange}
        amount = {toAmount}
        />
    </>
  )
}

export default App;

这是 CurrencyRow：

const CurrencyRow = (props) => {
    const {
        currencyOptions,
        selectedCurrency,
        onChangeCurrency,
        amount,
        onChangeAmount
    } = props
    return (
        <div>
            <input type="number" className="input" value={amount} onChange={onChangeAmount}/>
            <select value={selectedCurrency} onChange={onChangeCurrency}>
                {currencyOptions.map(option => (
                    <option key={option.id} value={option}>{option}</option>
                ))}
            </select>
        </div>
    )
}

export default CurrencyRow;

Answer 1

好的，所以我设法重做错误，我想我已经找到了解决方案。

1.解决“value 属性的Nan”问题
在这里，您检查 fromCurrency 和 toCurrency 是否不为空。但实际上当你第一次渲染你的 App 组件时，fromCurrency 和 toCurrency 是 undefined （并且 undefined ≠ null）：所以exchangeRate 将被设置为data.rates[undefined]，即当然是undefined。

useEffect(() => {
    if (fromCurrency != null && toCurrency != null) {
        fetch(BASE_URL)
            .then(res => res.json()) 
            .then(data => {
                setExchangeRate(data.rates[toCurrency])
            })
     }   
},[fromCurrency,toCurrency])

因此，当您定义toCurrency 和fromCurrency 时，您会将数字乘以或除以undefined，这就是它返回NaN 的原因：

toAmount = amount * exchangeRate // 1 * undefined → NaN

fromAmount = amount / exchangeRate // 1 / undefined → NaN

所以要解决这个问题，您可以检查fromCurrency 和toCurrency 是否为null，而不是检查它们是否为undefined：

if (fromCurrency !== undefined && toCurrency !== undefined) {
    // ...
}

2。解决“列表中的每个孩子都应该有一个唯一的key prop”的问题
在这里，当您通过options 进行映射时，您将每个option 的key 属性设置为option.id：

{currencyOptions.map(option => (
    <option key={option.id} value={option}>{option}</option>
))}

但是如果你记录currencyOptions，你可以看到它们只是字符串（“AUD”、“CAF”、“CHF”、...），所以它们没有任何id 属性，因为它们不是对象。所以option.id 是undefined。但是还有另一种方法可以在每个 option 上设置一个唯一的 key 值：.map() 允许您在每次迭代中获得一个 index：

<select value={selectedCurrency} onChange={onChangeCurrency}>
    {currencyOptions.map((option, index) => (
        <option key={index} value={option}>{option}</option>
    ))}
</select>

希望这能解决您的问题！