react useState()在第一次渲染中不更改值(对象)

Question

我正在使用react usestate((，我想更新device状态(它是一个对象(

我的问题是，当ShowRelays组件第一次渲染时，device是一个空对象，并且在第一次渲染期间不会更新，但对于下一次渲染，一切都很好

如何更新首次渲染的device状态？

(对不起我英语不好(

function ShowRelays(props) {
const [device, setDevice] = useState({})
let reduxDevices = useSelector(state => state.devicesReducer.devices)
let findDevice = () => {
let myDevice = reduxDevices.find(x => x._id === props.id)
setDevice(prevState => {
return {
...prevState,
...myDevice
}
})

}

useEffect(() => {
if (props.show) {
findDevice()
}
}, [props.show])

return
(
<div>
test
</div>
)
}

myDevice对象类似于：

{active: true, name: "device1", id: "deviceId"}

Answer 1

您可以将一个函数传递给您的useState钩子，该钩子将计算设备的初始值。

请参阅惰性初始化状态

function ShowRelays(props) {
let reduxDevices = useSelector(state => state.devicesReducer.devices);
const [device, setDevice] = useState(() => {
return reduxDevices.find(x => x._id === props.id)
});
return <div>test</div>;
}

在不使用单独状态的情况下，您的问题的另一个可能解决方案可能是以下(直接从选择器功能中选择正确的设备(：

function ShowRelays(props) {
const device = useSelector(state => {
return state.devicesReducer.devices.find(x => x._id === props.id);
});
return <div>test</div>;
}