React 无法读取属性'map'

Question

我正在使用反应钩子，我想显示来自API的每个count。但是我收到错误Cannot read property 'map'

API 返回 json 数据，例如：

model: {
item 1: {
count: 200
}
item2: {
count: 300
}
item 3: {
count: 400
}
}

useEffect看起来像：

const [results, setResults] = useStates();
useEffects(() => {
fetch('api)
.then(results =>{
return results.json();
}).then(data => {
let test = data.results.map((item) => {
return(
<div>{test.count}</div>
);
});
setResults(test);
});
});

Answer 1

.map()是一个只存在于数组而不是对象中的函数。因此，对于您的情况，您可以做的是遍历键并迭代对象。

useEffect(() => {
fetch("api")
.then(results => {
return results.json();
})
.then(data => {
let test = Object.keys(data.results).map((item, key) => {
return <div key={key}>{data.results[item].count}</div>;
});
setResults(test);
});
});

还有一件事是，它是useEffect和useState()，你留下了一个'，没有test变量。映射时不要忘记给出key。我已经纠正了上面代码中的所有错误。

Answer 2

你可以像这样使用Object.values()和Array.map()：

const data = {
model: {
item1: {
count: 200
},
item2: {
count: 300
},
item3: {
count: 400
}
}
};
console.log(Object.values(data.model).map(({
count
}) => count));

请注意，您只想在挂载useEffect(fn,[])上获取数据，也不建议将组件本身保存为状态，而是根据数据进行渲染：

const App = () => {
const [results, setResults] = useStates([]);
useEffect(() => {
fetch('api')
.then(results => {
return results.json();
})
.then(data => {
setResults(Object.values(data.model).map(({ count }) => count));
});
}, []);
return results.map((count,key)=> <div key={key}>{count}</div>);
};