[英]Looping through an object in react
Learning react学习反应
Trying to loop through an object from an API call that returns a json object and display it but struggling to implement it尝试从返回 json ZA8CFDE6331BD59EB2AC96F8911C4B6 的 API 调用中循环遍历 object 并实现它并显示它
This is the component that should render it这是应该呈现它的组件
export default class ProfilePage extends Component {
constructor() {
super();
this.state = { data: '' };
}
mapObject(object, callback) {
return Object.keys(object).map(function (key) {
return callback(key, object[key]);
})
}
async componentDidMount() {
const response = await fetch(`https://indapi.kumba.io/webdev/assignment`);
const json = await response.json();
// console.log(json)
this.setState({ data: json });
}
render() {
const data = this.state.data
console.log(data)
return (
<div className="row">
{Object.values(data).map(data => {
<div key={key}>
{data[key]}
</div>
})
}
Woerkkk please
</div>
);
}
}
All I'm getting is a blank screen.我得到的只是一个空白屏幕。
in the console i get the error 'key' is not defined no-undef在控制台中我得到错误'key' is not defined no-undef
You are missing a return statement in your map for your render method.您在 map 中缺少用于渲染方法的 return 语句。 Edit: Key is not returned from Object.values
编辑:密钥未从 Object.values 返回
Either reconfigure with a return statement like so:使用如下的 return 语句重新配置:
{Object.keys(data).map(key => {
return (<div key={key}>
{data[key]}
</div>);
})
Or alternatively you can implicitly return from arrow function using brackets或者,您可以使用括号从箭头 function 隐式返回
{Object.keys(data).map(key => (
<div key={key}>
{data[key]}
</div>)
))
Using Object.values(myObj)
you can get all object values as a array.使用
Object.values(myObj)
您可以将所有 object 值作为数组获取。 So, with this array, you can iterate over the array and show your items, like this:因此,使用此数组,您可以遍历数组并显示您的项目,如下所示:
{Object.values(myObj).map(value => <p>{value}</p>)}
Don't forget use key
prop when iterating.迭代时不要忘记使用
key
prop。
You can use useState and useEffect to fetch the object data您可以使用 useState 和 useEffect 来获取 object 数据
const App = () => { const [objData, setObjData] = useState({}); const [objItems, setObjItems] = useState([]); const fetchObj = async () => { const response = await fetch(`https://indapi.kumba.io/webdev/assignment`); const data = await response.json(); setObjData(data); setObjItems(data.items); } useEffect(() => { fetchObj() },[]); return( <div> <h1> Order Id:{objData.order_id}</h1> // or any other objData keys <h1>Items: </h1> <ul> { objItems.map((i, idx) => { return( <li key={idx}>Name: {i.name}, Category: {i.category}, Price: {i.price}, Currency: {i.currency}</li> ) }) } </ul> </div> ) } export default App;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.