reactjs - 如何在reactjs中的材料表上呈现第二个请求的响应

Question

我正在使用带有 reactjs 的材料表来创建数据网格。我正在使用来自 API 的先前 HTTP 请求的数据填充表，并希望在同一个表的另一列中呈现第二个 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

问题是您使用了Promise，MyFunction但没有正确返回它。下面将设置outputto的值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>
  )
}