React 应用程序抛出错误"收到'值'属性的 NaN"和"组件正在更改要控制的不受控制的输入"

Question

App.js

import './App.css';

从"react"导入｛useState，useEffect｝；从"导入CurrencyItem/CurrencyItem'；

函数应用程序(({const url='https://api.exchangerate.host/latest'；

const [currencyNames, setCurrencyNames] = useState([]);
const [fromCurrency, setFromCurrency] = useState();
const [toCurrency, setToCurrency] = useState();
const [exchangeRate, setExchangeRate] = useState();
const [fromAmount, setFromAmount] = useState();
const [toAmount, setToAmount] = useState();
useEffect(() => {
fetch(url)
.then((response) => response.json())
.then((data) => {
setCurrencyNames([...Object.keys(data.rates)]);
});
console.log(currencyNames);
}, []);
useEffect(() => {
if (toCurrency != null && fromCurrency != null) {
fetch(`${url}?symbols=${toCurrency},${fromCurrency}`)
.then((response) => response.json())
.then((data) => {
setExchangeRate(data.rates[toCurrency]);
console.log(data);
console.log(toCurrency, fromCurrency, exchangeRate);
});
}
}, [toCurrency, fromCurrency]);
const changeToAmount = (v) => {
let newValue = parseFloat(v);
let newAmount = newValue / exchangeRate;
setFromAmount(newAmount);
};
const changeFromAmount = (v) => {
let newValue = parseFloat(v);
let newAmount = newValue * exchangeRate;
setToAmount(newAmount);
};
return (
<div className="App">
<div className="app-container">
<h2>CURCON</h2>
<CurrencyItem
currencyNames={currencyNames}
selectedCurrency={fromCurrency}
onChangeCurrency={(e) => setFromCurrency(e.target.value)}
changeAmount={(e) => changeToAmount(e.target.value)}
amount={fromAmount}
></CurrencyItem>
<CurrencyItem
currencyNames={currencyNames}
selectedCurrency={toCurrency}
onChangeCurrency={(e) => setToCurrency(e.target.value)}
changeAmount={(e) => changeFromAmount(e.target.value)}
amount={toAmount}
></CurrencyItem>
</div>
</div>
);

}导出默认应用程序；

CurrencyItem.js

import React from 'react';

const CurrencyItem=({currencyNames，所选货币，onChangeCurrency，数量changeAmount，})=>{返回(

选择货币

{currencyNames.map((el，i(=>返回(｛el｝)；})})；}；

导出默认CurrencyItem；

错误

react_devtools_backend.js:4061 Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string.
at input
at div
at div
at CurrencyItem (http://localhost:3000/static/js/bundle.js:175:5)
at div
at div
at App (http://localhost:3000/static/js/bundle.js:34:92)
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
at input
at div
at div
at CurrencyItem (http://localhost:3000/static/js/bundle.js:175:5)
at div
at div
at App (http://localhost:3000/static/js/bundle.js:34:92)

这是我第一次在Stack Overflow上提问，如果我犯了任何格式化错误或错误，请原谅我

Answer 1

中的值

const changeFromAmount = (v) => {
let newValue = parseFloat(v);
let newAmount = newValue * exchangeRate;
setToAmount(newAmount);
};

无法解析为数字。检查v参数，然后检查exchangeRate。其中一个不是Number。

如果在useState中为exchangeRate、toAmount和fromAmount添加初始状态会更好。