Обновление состояния не запускает рендеринг в компоненте условного рендеринга

Question

Мой компонент выглядит примерно так:

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 - это вспомогательный хук, который тянет от AsyncStorage для моего собственного приложения, поэтому имеет небольшую задержку. Когда я запускаю это, я вижу в журналах консоли «данные не готовы», а затем «данные готовы», но я вижу только рендеринг ComponentB, а не ComponentA.

Если это полезно , пользовательский крючок выглядит следующим образом. Он просто сериализует JSON в строку для хранения.

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

У кого-нибудь есть идеи по поводу того, что здесь может происходить?

Спасибо!

small PS: Я также вижу предупреждение Sending "onAnimatedValueUpdate" with no listeners registered., которое, похоже, не относится к react-navigation. Но просто хотел поставить это здесь.

Answer 1

Прежде всего, поскольку ваш параметр key в пользовательском хуке не определен, поэтому данные никогда не будут установлены. Передайте ключ пользовательскому хуку в качестве реквизита.

Во-вторых, вам нужно обновить свое условие, чтобы проверить, присутствуют ли данные или нет, при условии, что свойство ready существует в данных после набора, например это:

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 />
        </>
    )
}