Блог

Главная - Вопросы по программированию - Бесконечная петля из обещания и использование крючка состояния

Бесконечная петля из обещания и использование крючка состояния

#reactjs #promise #react-hooks

Вопрос:

Мне удалось случайно создать бесконечный цикл из обещания выборки и крючка useState в react. Может ли кто-нибудь указать, почему это повторяется? Мое понимание обеих частей немного слабовато, и я полагаю, что четкое объяснение с правильно функционирующим кодом помогло бы мне понять, как работают обе части.

К вашему сведению — переменная loreReturn-это объект с некоторыми идентификаторами транзакций, и функция getData берет текст из Интернета, используя эти идентификаторы.

 export function TextExample(){
  let testText = "no itemLore yet";
  const [text, textAdd] = useState(testText);
    const txs = loreReturn.data.transactions.edges;
    txs.forEach ((tx) => {arweave.transactions.getData(tx.node.id, {decode: true, string: true}).then(data => {
        console.log(data);
        textAdd(text   data);
    });
  });
  return (
    <div>
      <p>{text}</p>
    <
/div>
  ); 
};

Ответ №1:

Поместите свои вызовы API в useEffect хук и добавьте необходимые зависимости. Это позволит убедиться, что вы не будете повторно запускать вызовы API каждый раз, когда компонент перезагружается

 export function TextExample(){
  let testText = "no itemLore yet";
  const [text, textAdd] = useState(testText);

  useEffect(()=>{
    const txs = loreReturn.data.transactions.edges;
    txs.forEach ((tx) => {
        arweave.transactions.getData(tx.node.id, {decode: true, string: true})
            .then(data => {
                console.log(data);
                textAdd(text   data);
      });
    });
  }, [])
    
  return (
    <div>
      <p>{text}</p>
    </div>
  ); 
};

Комментарии:

1. Спасибо за это! Чтобы уточнить, крючок реакции настроен на загрузку снова и снова и постоянное обновление состояния, поэтому тот факт, что я поместил textAdd в API, означает, что он должен запускать эту выборку снова и снова и каждый раз выводить результат?

2. Вопрос — объект loreReturn имеет более одной транзакции для выполнения цикла. В настоящее время похоже, что это исправление регистрирует каждую транзакцию в консоли, но обновляет хук useState только одной транзакцией. Непредсказуемо, какая транзакция отображается, предположительно та, которая будет доставлена первой? или последний? Есть идеи, как последовательно обновлять хук useState, чтобы отображать каждую транзакцию одну за другой?

3. @GhostOutfit Переменные состояния, в данном случае, text являются переменной состояния, и они не обновляются в режиме реального времени, для обновления значения может потребоваться некоторое время. поэтому предлагаю вам установить необходимые значения в обычную переменную и установить значение в состояние после завершения всех операций

Метки: