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

问题是您在MyFunction中使用promises，但未正确返回。以下内容会将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调用处理promise的结果。

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

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

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

如何在reactjs

1 个答案: