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

首先，由于自定义挂钩中的键参数未定义，因此数据将永远不会被设置。将密钥作为道具传递给自定义钩子。

第二，您需要更新条件以检查是否存在数据，假设设置后数据上具有 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 />
        </>
    )
}

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

1 个答案: