无法将初始数组传递给 useState 以稍后对其进行修改

Question

我在 React 开发中很陌生。我想将来自 props 的几个温度值作为 initialState(通过 openWeather api(传递，然后使用 setTemperature(通过 onClick 将这些值更改为其华氏度等效值(。

我的代码看起来像这样，虽然初始接收值，但钩子没有：

const initialState = [tempCelsius, minTemp, maxTemp];
const [temperature, setTemperature] = useState(initialState)
const celToFar = () => {
setTemperature((parseInt(initialState) * 9) / 5 + 32);
};

我尝试了其他几个想法，包括这个，它返回对象对象：

const initialState = [tempCelsius, minTemp, maxTemp];
const [temperature, setTemperature] = useState(prevState => {
return {...prevState, initialState}
})
const celToFar = () => {
setTemperature((parseInt(initialState) * 9) / 5 + 32);
};

我做错了什么？我很确定我不需要 useEffect，如果我将数组正确传递给钩子，应该能够做到这一点，因为在控制台中.log该函数在应用于单个 props 时有效。

Answer 1

欢迎来到 SO！ :)

parseInt(initialState( 会将数组 [1,2,3] 变为 1...

将您的函数更改为以下内容：

const celToFar = () => {
let farengeits = initialState.map(v => v * 9 / 5 + 32); 
setTemperature(farengeits);
};

要呈现值，您可以使用：

return (
<div>{temperature.map((f, idx) => <div key={idx}>{f} F</div>}</div>
)