I encountered an issue with the BarChart component:
An error message saying "undefined is not iterable!" appeared.
The API response I received looks like this:
{
"saleCharts": [
{
"priceSum": 0,
"categoryName": "string"
}
],
"statusCharts": [
{
"qtySum": 0,
"status": "string"
}
]
}
In my React code, I have implemented the following logic:
function Dashboard({ notifyData }) {
const [orderData, setOrderData] = useState([]);
const [dashboardData, setDashboardData] = useState([]);
const [newOrderCount, setNewOrderCount] = useState(0);
useEffect(() => {
getNewOrder();
}, [notifyData]);
var getNewOrder = function () {
let orderResp = [];
axios.get(GetNewOrdersUrl + '/2').then(response => {
orderResp = response.data;
})
.then(() =>
axios.get(OrderDashboardUrl).then(response => {
setOrderData(orderResp.orderList);
setNewOrderCount(orderResp.count);
setDashboardData(response.data.saleCharts);
}))
};
}
return (
<>
<BarChart
xAxis={[
{
id: 'barCategories',
data: dashboardData.map(item => item.categoryName),
scaleType: 'band',
},
]}
series={[
{
data: dashboardData.map(item => item.priceSum),
},
]}
colors={['#d75b47']}
width={1000}
height={350}
/>
</>
)
I would appreciate any insights on why this problem occurred and how to resolve it.
My understanding is that the BarChart component renders before the state is properly set.