在react中迭代map json

Question

我在尝试使用这种类型的json 中的数据时遇到了一些问题

{
"content_module": {
"authz.provider_3": [
"User 10",
"User 11",
"User 18",
"User 2",
"User 3",
"User 5"
],
"authz.provider_2": [
"User 13",
"User 15",
"User 16",
"User 17",
"User 8",
"User 9"
],
"authz.provider_4": [
"User 0",
"User 1",
"User 12",
"User 19",
"User 6",
"User 7"
],
"authz.provider_1": [
"User 14",
"User 4"
]
},
"auth_module": {
"authn.provider_4": [
"User 2",
"User 5",
"User 9"
],
"authn.provider_2": [
"User 1",
"User 10",
"User 13",
"User 14",
"User 16",
"User 18",
"User 6",
"User 8"
],
"authn.provider_3": [
"User 0",
"User 11",
"User 12",
"User 15",
"User 7"
],
"authn.provider_1": [
"User 17",
"User 19",
"User 3",
"User 4"
]
}
}

我在react中使用axios，但当我执行get方法并将数据存储在一个状态中时，当我尝试使用forEach方法时，我会收到这种类型的错误。

Objects are not valid as a React child (found: object with keys {authz.provider_3, authz.provider_2, authz.provider_4, authz.provider_1}). If you meant to render a collection of children, use an array instead.

这是获取方法：

const [contentModules, setContentModules] = useState([]);
useEffect(() => {
axios.get('http://localhost:8080/usuarios/filtrados')
.then(res => {
setContentModules(res.data.content_module);
setAuthModules(res.data.auth_module);
})
.catch(err => {
console.log(err);
})
}, [])

Answer 1

错误很明显，您不能使用forEach在对象上循环如果要循环整个模块，可以使用Object.values(res.data.content_module)，它将返回类似于[[],[],[]]的数组数组或者，如果您想循环使用密钥，Object.keys(res.data.content_module)将返回密钥数组["authz.provider_1"，"authz_provider_2"]