解决功能组件中的"Objects are not valid as a React child (found: [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}/>})}
...
);

对于这个问题，我看到的所有解决方案都建议将异步函数放在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;
});
}

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}/>})}
...
);