React.map不是一个函数和解决方案

Question

我有一个关于React映射的非常基本的问题。所以我有一个类似于这样的JSON：

{
"Status": true, 
"discounts": {
"individual": {
"number_of_cars_discount": {
"1": "1", 
"10": "1", 
"2": "0.98", 
"3": "1", 
"4": "1", 
"5": "1", 
"6": "1", 
"7": "1", 
"8": "1", 
"9": "1"
}
}
}
}

价格系数组成部分中定义了个人职位：

export default function PriceCoefficient() {
const [individualPosts, setIndividualPosts] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
useEffect(() => {
const fetchPosts = async () => {
try {
if (res.status == 200) {//TODO: JSON Encode here?, full repsponse ore response.data as return?
setIndividualPosts(res.data.discounts.individual.number_of_cars_discount);
}
setLoading(false);
} catch (err) {
setError(err.message);
setLoading(false);
}
};
fetchPosts();
}, []);
return (
<>
<PanelHeader size="sm" />
<div className="content">
<Row>
<Col xs={12}>
<Card>
<CardHeader>
<CardTitle tag="h4">PRICE COEFFICIENT</CardTitle>
</CardHeader>
<CardBody>
<Table responsive>
<thead className="text-primary">
<tr>
<th>Customer Type</th>
<th>Discount</th>
</tr>
</thead>
<PricePosts
individualPosts={individualPosts}
loading={loading}
error={error}
/>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
</>
);
}

在另一个组件中，我只是把个人帖子作为一个道具，我想在桌子上展示它：

<tbody>
<tr>
<td>Individual</td>
{individualPosts.map((post, index) => (
<td key={`individual-posts-${index}`}>{post.discount}</td>
))}
</tr>
</tbody>.

我不明白为什么，但我得到了个性化的Posts.map不是一个函数，我知道它被定义为一个对象，但有解决方案吗？

感谢

Answer 1

您只能在数组上使用.map。number_of_cars_discount不是一个数组，而是一个对象。如果要迭代对象的值，请使用Object.values(individualPosts).map，如果要迭代键，则使用Object.keys(individualPosts).map。

如果遍历键，则可以访问循环中的键和值。

Object.keys(individualPosts).map(key => {
console.log(key); //key
console.log(individualPosts[key]); //value
});