反應useState（）不改變第一次渲染中的值（一個對象）

Question

我正在使用 react usestate() 並且我想更新device狀態（它是一個對象）

我的問題是當ShowRelays組件第一次渲染時device是空的 object 並且在第一次渲染期間它沒有得到更新，但是對於下一次渲染一切都很好

如何更新device state 首次渲染？

（對不起，我的英語不好）

.

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 object 就像：

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

Answer 1

您可以將 function 傳遞給您的 useState-hook，它將計算您的設備初始值。

參見惰性初始化 state

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

在不使用單獨的 state 的情況下解決您的問題的其他可能解決方案可能如下（直接 select 選擇器功能中的正確設備）：

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