Использование результатов от useEffect - PullRequest
Новая
       3

Использование результатов от useEffect

0 голосов
/ 09 января 2020

У меня есть два вызова двух отдельных API. Я хочу создать третий результат, который является комбинацией первых двух. Однако я не могу получить доступ к переменным. 

export default function AutoServices() {
  const [data, setData] = useState();
  const [a, setA] = useState();
  const [b, setB] = useState();
  const [C, setC] = useState();

  useEffect(() => {
    FetchCurrentPage(result => setData(result.content.default));
    FetchAutoServices(result => b(result.records));
    FetchSetAccel("/locationsinit", result => setA(result.serviceGroups));
    setC(AddDesc(a, b));
  }, []);


  function AddDesc(x, y) {
    var result = x;
    for (var i = 0; i < result.length; i++) {
        for(var j = 0; j < y.length; j++)
        {
            if(result[i].slug === y[j].iconclass)
            {
                Object.assign(result[i], {Desc: y.content.default.teaser});                
            }
        }      
    }
    return result;
  }  
  return (    
    <>
      {data && (
        <Helmet> ...........

Ошибка в браузере: Не удается прочитать свойство 'длина' неопределенного, ссылаясь на первую строку оператора for. Я знаю, что мой код возвращает json, потому что когда я проверяю chrome я вижу json

Ответы [ 2 ]

0 голосов
/ 09 января 2020

Вы имеете дело с асинхронным c кодом, поэтому вам придется подождать, пока первые два не решатся. Вы можете использовать Promise.all , а затем делать все, что с результатом * потенциально похожим на: 

useEffect(() => {
  FetchCurrentPage(result => result.content.default)
  const [a, b] = Promise.all([
    FetchAutoServices(result => result.records),
    FetchSetAccel("/locationsinit", result => result.serviceGroups);
  ]);
  setC(AddDesc(a, b));}, 
[]);
0 голосов
/ 09 января 2020

Обновления состояния асинхронны, поэтому a по-прежнему не определено, когда вы вызываете AddDesc в том же закрытии useEffect. Вы можете добавить вторую useEffect с a и b в качестве зависимостей: 

useEffect(() => {
  FetchCurrentPage(({ content }) => setData(content.default));
  FetchAutoServices(({ records }) => setB(records));
  FetchSetAccel("/locationsinit", ({ serviceGroups }) => setA(serviceGroups));
}, []);

useEffect(() => {
  if (a && b) setC(AddDesc(a, b));
}, [a, b]);
...