Question

所以我有两个useState，一个用于对象A，将启动对象B。我的问题是我的渲染拾取了一个空的B数组，这导致1/2秒的空白屏幕。（如果我尝试删除obj A上的初始化，由于同时需要两者，我也会得到空白的空白屏幕。）

如何将第二状态链接到第一状态？

我可能在做以下错误。

const initializeObjA = () =>{
    return objectA //pick up data from realmdb
}

const [objectA, setObjectA] = useState(initializeObjA());
const [objectB, setObjectB] = useState([]);

useEffect(() => {
  if (!objectA) return
  setObjectB(objectA.property); // i actually have some other manipulation done on this property.
},[])


console.log("objectB ", objectB) // always [] for first render
return ...

Answer 1

使用2个useEffects。 1个具有空的依赖项（在安装时运行一次），另一个以objectA作为依赖项。

在第一个useEffect（空依赖）中，提供null作为初始值，然后在此处进行初始化。

在第二个useEffect（具有依赖项）中，请确保如果未初始化objectA则返回）

const [objectA, setObjectA] = useState(null);
const [objectB, setObjectB] = useState([]);

const initializeObjA = () =>{
    // return objectA //pick up data from realmdb
    setObjectA(data)
}

useEffect(() => {
    initializeObjA()
},[]);

useEffect(() => {
  if (!objectA) return
  setObjectB(objectA.property); 
},[objectA])

Answer 2

这不是异步和加载状态丢失的问题吗？可以在useEffect中初始化对象A吗？

        const initializeObjA = async () =>{
          //missing your api call here, no ? something like : const data = await fetchData();  
          return data;
        }

        const [objectA, setObjectA] = useState(null);
        const [objectB, setObjectB] = useState([]);
        const [loading, setLoading] = useState(true);

        useEffect(() => {
          (async () => {
           const myObject = await initializeObjA();
           setObjectA(myObject);
           setObjectB(myObject.property);
           setLoading(false);
          })();
        },[])

        if (loading) return; //Could return a spinner, or null or whatever you want during processing

Answer 3

我唯一能做的解决方案是将第二个状态移动到子组件。这迫使我清理钩子/类。重要的部分是第一次在useState（）上使其正确，而不是使用条件useEffects。（因此，在该示例中，objectB将在子组件上初始化，而不是在该父对象A上被初始化）

有点像过去，将实例化代码移到构造函数中，而不是使用componentDidMount。以相同的方式，在useState（function（））中实例化状态至关重要。

但这也意味着我一次可以做一个值。很好，无论如何它会使代码更干净。

反应两个useState，一个依赖于另一个

3 个答案: