javascript - 解决功能组件中的“对象作为 React 子项无效（找到：[object Promise]）”

Question

我在功能组件中有以下内容。

const [trucks, setTrucks] = React.useState([]);

React.useEffect(() => {
    Request.getTrucksForToday().then((x) => {setTrucks(x)}); // <-- this is an async function to an axios request
});

return (
...

{trucks.map((truck) =>{return<LocalShippingIcon lat={truck.latitude} lng={truck.longitude} text={truck.name}/>})}
...
);

我为这个问题看到的所有解决方案都建议将 async 函数放在componentDidMount()( 1 , 2 ) 中。有没有办法在不这样做的情况下解决它？

为了完整起见，这里是功能

export function getTrucksForToday() {
  return axios({
    method: "GET",
    url: constants.backend_url + "schedule/getTrucksForToday",
    headers: request_headers
  })
    .then(function(response) {
      console.log(response.data);
      return response.data;
    })
    .catch(function(error) {
      console.log(error);
      return error;
    });
}

标签： javascriptreactjspromiseaxios

Answer 1

添加[]到 useEffect()

const [trucks, setTrucks] = React.useState([]);

React.useEffect(() => {
    Request.getTrucksForToday().then((x) => {setTrucks(x)}); // <-- this is an async function to an axios request
},[]);

return (
...

{trucks.map((truck) =>{return<LocalShippingIcon lat={truck.latitude} lng={truck.longitude} text={truck.name}/>})}
...
);