在条件渲染组件中，状态更新不会触发重新渲染。

Posted 2021-03-27

我的组件大致是这样的。

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 为我的本地应用程序，所以它有一点延迟。当我运行这个程序时，我看到控制台记录 "data is not ready"（数据未准备好），然后是 "data is ready"（数据准备好），但我只看到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 不相关的事情。但就是想把这个放在这里。

答案

首先，作为你的 钥匙 param在自定义钩子中是未定义的，所以数据永远不会被设置。将键作为道具传递给自定义钩子。

其次，你需要更新你的条件来检查数据是否存在，假设是 妥当 设置后的数据存在属性，就像这样。

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