State 更新不会触发条件渲染组件中的重新渲染

Question

My component roughly looks like this:

import useCustomHook from "./hooks";

const Test = () => {
    const [data, setData] = useCustomHook("example-key", {ready: false});
    return (
        data.ready ?
        <>
            {console.log("data is ready");}
            <ComponentA />
        </> :
        <>
            {console.log("data is not ready");}
            <ComponentB />
        </>
    )
}

useCustomHook is helper hook that pulls from AsyncStorage for my native application, so it has a slight delay. When I run this, I see the console logs "data is not ready" followed by "data is ready", but I only see ComponentB render, and never ComponentA.

If it's helpful, the custom hook looks like this. It basically just serializes the JSON into a string for storage.

export default (key, initialValue) => {
  const [storedValue, setStoredValue] = React.useState(initialValue);

  React.useEffect(() => {
    const populateStoredValue = async () => {
      const storedData = await AsyncStorage.getItem(key);
      if (storedData !== null) {
        setStoredValue(JSON.parse(storedData))
      }
    }
    populateStoredValue()
  }, [initialValue, key]);

  const setValue = async (value) => {
    const valueToStore = value instanceof Function ? value(storedValue) : value;
    await AsyncStorage.setItem(key, JSON.stringify(valueToStore));
    setStoredValue(valueToStore);
  }

  return [storedValue, setValue];
}

Anyone have ideas on what might be happening here?

Thanks!

small PS: I also see the warning Sending "onAnimatedValueUpdate" with no listeners registered. , which seems like it's a react-navigation thing that's unrelated. But just wanted to put that here.

Answer 1

First of all, as your key param in custom hook is undefined so data will never be set. Pass the key to the custom hook as the prop.

Secondly, you need to update your condition to check if data is present or not, assuming ready property exist on data after set, like this:

import useCustomHook from "./hooks";

const Test = () => {
    const [data, setData] = useCustomHook(/* Add key here */);
    return (
        data && data.ready ?
        <>
            console.log("data is ready");
            <ComponentA />
        </> :
        <>
            console.log("data is not ready");
            <ComponentB />
        </>
    )
}