Блог

Мой 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();
  }, []);
 

а затем, чтобы обновить данные дочернего компонента:

 useEffect(() => {
    let parsedData: TChildComponent;
    parsedData.a = data.a;
    
    if (data.c) {
      parsedData.c = data.c;
    } 
  
    setChildData(parsedData);
  }, [allData.a]);
 

Но да, это не может работать, поскольку в начале allData.a находится undefined в начале.

Итак, подводя итог: я не уверен, как подойти к этой ситуации. Я понимаю, что у перехватчиков нет функции обратного вызова специально. Но эта ситуация кажется вполне нормальной, поэтому должен быть лучший шаблон проектирования для решения этой проблемы, которого я не вижу.

Поскольку состояние должно быть неизменяемым в React, вместо того, чтобы иметь массив зависимостей allData.a , allData может работать только зависимость от (и затем вы можете проверить, 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} />
);