Как отреагировать на второй запрос на таблицу материалов в responsejs?

Question

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

render: rowData => this.Myfunction(rowData)

Myfunction(data){
  axios.post('/api/status', {
      payload:data
    })
    .then( res => {
        if(res.data[0] != undefined){
       return res.data[0].status
      }
      else{
          return 'Null'
      }
    })
    .catch(function (error) {
          console.log(error);
     });
   }
}

Данные, которые я отправляю в myFunction, работают правильно для каждой строки, но я не могу вернуть ответ, полученный на мой запрос с помощью axios.

Я тоже пробовал

return axios.post('/api/reviews', {
  payload:data
}) 

Но я получаю ошибку:

Objects are not valid as a React child (found: [object Promise]). If you     meant to render a collection of children, use an array instead.

Answer 1

Проблема в том, что вы используете обещания в MyFunction но не возвращает его правильно. Следующее установит значение output в undefined, потому что возвращение внутрь then асинхронный

function Component() {
  const data = {};
  const [output, setOutput] = useState({});

  useEffect(() => {
    setOutput(MyFunction(data));
  }, []);

  return <div>{ JSON.stringify(output) }</div>;
}

Во-первых, вам нужно вернуть обещание от MyFunction,

function Myfunction(data) {
  return axios
    .post('/api/status', {
      payload: data
    })
    .then(res => {
      if (res.data[0] != undefined) {
        return res.data[0].status;
      } else {
        return 'Null';
      }
    })
    .catch(function(error) {
      console.log(error);
    });
}

Затем обработайте результат обещания, используя then вызов.

function Component() {
  const [output, setOutput] = useState({});

  useEffect(() => {
    MyFunction(data).then(setOutput);
  }, []);

  return (
      <div>{ JSON.stringify(output) }</div>
  )
}