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

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

有人对这里可能发生的事情有想法吗？

谢谢！

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