Блог

Главная - Вопросы по программированию - Реагирует на рендеринг при загрузке, но не обновляется при завершении асинхронных вызовов

Реагирует на рендеринг при загрузке, но не обновляется при завершении асинхронных вызовов

#javascript #reactjs #asynchronous

#javascript #reactjs #асинхронный

Вопрос:

* У меня возникли некоторые проблемы с компонентами, которые не отображают информацию, поскольку обещания async не выполняются до выполнения рендеринга. Я уверен, что это просто что-то простое, но я не знаю, что делать с банкоматом Google 😉

Я просто использую async-await для одного api.пройдите через axios, и обещание выполнено, только не до рендеринга сайта. Я также пробовал использовать эффект(() => {},[]); но к чему я стремлюсь, так это к тому, чтобы сайт загружался без каких-либо нажатий, со всей готовой информацией.

Я надеюсь, что это имеет смысл! Еще раз спасибо, если у вас есть время посмотреть на это, или оставьте комментарий, если чего-то не хватает.

Спасибо!*

Компонент:

 import React, { useEffect, useState } from 'react';
import getServiceDetails from '../../controller/getServiceInfo';

function Customer(props) {
  const [serviceButtons, setServiceButtons] = useState([]);

  // here I get the axios async call //
  const serviceInfo = getServiceDetails();
  // it returns the promise unfullfilled on render.

  if (typeof serviceInfo !== 'undefined' amp;amp; serviceInfo.length > 0) {
    let buttonArray = [];
    for (let i = 0; i < serviceInfo.length; i  ) {
      buttonArray.push(
        <button
          onClick={() => {
            console.log('test');
          }}
          key={i}
        >
          {serviceInfo[i].name}
        </button>
      );
    }
    setServiceButtons(buttonArray);
  }

  return (
    <div id="customer_card">
      <h2>Customer overview:</h2>
      <p>
        Name: {props.db?.firstname   ' '   props.db?.lastname} <br />
        Phone: {props.db?.phone} <br />
        Email: {props.db?.email}
      </p>
      <div className="newbookingbuttons">
        <h3>New reservations:</h3>
        {serviceButtons}
      </div>
      <div className="list_of_bookings">
        <h3>Current bookings:</h3>
        <p>
          Here we list all bookings that are current with possible changes
          <button
            onClick={() => {
              // this button does not work... (tried to check if it was different with a click)
              let buttonArray = [];
              for (let i = 0; i < serviceInfo.length; i  ) {
                buttonArray.push(
                  <button
                    onClick={() => {
                      console.log('test');
                    }}
                    key={i}
                  >
                    {serviceInfo[i].name}
                  </button>
                );
              }
              setServiceButtons(buttonArray);
            }}
          >
            Manual
          </button>
        </p>
      </div>
    </div>
  );
}

export default Customer;

консоль:

 Promise {<pending>}Customer.js:29 undefined
Customer.js:30 []
Customer.js:28 Promise {<pending>}__proto__: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: Array(1)
Customer.js:29 undefined

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

1. React не знает, что асинхронный вызов завершен. React повторно отображает на основе изменений состояния, реквизитов и контекста. попробуйте настроить состояние для хранения результата const [serviceInfo, setServiceInfo] = useState(); , а затем использовать useEffect для вызова вашей асинхронной функции useEffect(() => { asyncFunc().then(result => setServiceInfo(result)) }, [setServiceInfo]); .

2. Спасибо, @JacobSmit отлично поработал с этим улучшением. Спасибо!!