Reactjs React useEffect取决于调用api后初始化的值

My api返回以下类型的对象：

type TApiReturn = {
  a: string;
  b?: string;
  c?: string;
  d?: string;
};

现在，在接收到数据之后，我想将其中的一部分传递给子组件

type TChildComponent = {
a: string;
c?: string;
};

我认为有效的方法是：

const [allData, setAllData] = React.useState<TApiReturn>();
const [childData, setChildData = React.useState<TChildComponent>();

useEffect(() => {
    const fetchData = async () => {
      const result = await api.get('myDataPath'); //this works, not part of it
      setData(result.data);
    };

    fetchData();
  }, []);

但是，这是不行的，因为在开始时，

allData.a

在开始时是

未定义的

因此，总而言之：我不确定如何处理这种情况。我知道hook并不是故意使用回调函数的。但这种情况似乎很正常，因此必须有一种更好的设计模式来解决我没有看到的这个问题。
因为状态在React中应该是不可变的，而不是具有
allData的依赖关系数组。只有
allData
的依赖关系的a
可以工作（然后您可以检查
allData
是否存在，如果存在，则将
allData.a
与
childDate.a
进行比较）

但我认为更好的方法不是将同一数据结构拆分为多个有状态变量，而是在存在时传递
allData.a
，例如：

const [allData, setAllData] = React.useState<TApiReturn>();
// no childData at all

// ...

return (
  <Child a={allData?.a} c={allData?.c} />
);

const[allData，setAllData]=React.useState（）；
//根本没有儿童数据
// ...
返回(
);
谢谢。但是当我尝试您建议的方法（如果存在数据，则向下传递数据）时，我总是发现
对象可能是“未定义的”。TS2532
。当数据可能还不存在并且需要呈现子对象时，您希望发生什么？我有条件地包装了整个组件，{allData&&}。如果它是有条件呈现的，只需删除可选链就可以了，例如：
a={allData.a}c={allData.c}
我的linter总是抱怨这两种情况。到目前为止，我只能通过使用
null
初始化allData来解决TS2532问题。我必须研究一下，这似乎是一种会导致不必要错误的方法。另外，如果我不使用条件渲染，我该如何解决这个问题？
const [allData, setAllData] = React.useState<TApiReturn>();
// no childData at all

// ...

return (
  <Child a={allData?.a} c={allData?.c} />
);