React 初始呈现空值但稍后更新。需要设置值作为初始状态

Question

我创建了一个自定义挂钩，用于在本地存储中存储用户选择的值。这些值存储在 localstorage 中。我需要组件使用自定义挂钩返回的值，并在呈现时将其存储为初始状态。但问题是组件最初加载时返回的值结果是 null。因此，状态将其设置为1（我有条件地处理了它）。

我需要更新的值以某种方式设置状态，即使初始渲染是 null。

这是代码片段

    const bedVal = useLocalStorage('beds')
    const bedroomsVal = useLocalStorage('bedrooms')
    const guestsVal = useLocalStorage('guests')
    const bathroomsVal = useLocalStorage('bathrooms')


    const [bedrooms, setBedrooms] = useState(bedroomsVal ? bedroomsVal : 1);
    const [beds, setBeds] = useState(bedVal ? bedVal : 1);
    const [guests, setGuests] = useState(guestsVal ? guestsVal : 1);
    const [bathrooms, setBathrooms] = useState(bathroomsVal ? bathroomsVal : 1)

Answer 1

请尝试使用 useEffect 钩子。

类似的东西：

const [beds, setBeds] = useState();

useEffect(() => {
 setBeds(bedVal || 1);
}, []);

Answer 2

谢谢，@NetanelVaknin。只是添加到您的代码中，即使我们使用 useEffect ，该值最初是 null，但如果我们添加依赖项，它会更新为新值。

 useEffect(() => {
        setBeds(bedVal || 1);
    }, [bedVal]);

React 初始呈现空值但稍后更新。需要设置值作为初始状态

React initial renders null value but updates later. Need to set the value as initial state

javascript

local-storage

reactjs

react-hooks

use-state