[英]Working with a array of objects in React. Iterating error saying I cannot use object, use array instead
I'm working on a React portfolio project.我正在做一个 React 投资组合项目。 I have an external data.js file with an array of objects, which I import into the JS file I'm working in. I want to iterate over the array and place each object into it's own div.
我有一个包含对象数组的外部 data.js 文件,我将其导入到我正在使用的 JS 文件中。我想遍历该数组并将每个对象放入它自己的 div 中。
I already tried an If Loop and now working with Map().我已经尝试过 If 循环,现在使用 Map()。 This is my code:
这是我的代码:
const Project = () => {
const ProjectItem = () => (
ProjectenList.map(project => (
<div key={project.id}>
<div>{project}</div>
</div>
))
)
return (
<div className='project-kader'>
<h1 className='title'><ProjectItem /></h1>
</div>
)
}
I don't get the problem of iterating trough an array of objects.我没有遇到遍历对象数组的问题。 This is the error:
这是错误:
Error: Objects are not valid as a React child (found: object with keys {-list of keys-}).错误:对象作为 React 子对象无效(找到:带有键 {-list of keys-} 的对象)。 If you meant to render a collection of children, use an array instead.
如果您打算渲染一组子项,请改用数组。
I must overlook a simple thing, but I'm a little stuck at the moment :-)我必须忽略一件简单的事情,但我现在有点卡住了:-)
From the fact you're using project.id
(and the error message from React), we can assume that project
is an object, which means you're trying to use an object as a React child here:从你使用
project.id
的事实(以及来自 React 的错误消息),我们可以假设project
是一个对象,这意味着你试图在这里使用一个对象作为 React 子项:
<div>{project}</div>
The error is that you can't do that.错误是你不能这样做。 Instead, use properties from the object to come up with how you want it displayed.
相反,使用对象的属性来想出您希望它如何显示。 For instance, if
project
has a description
property:例如,如果
project
有一个description
属性:
<div>{project.description}</div>
Or if it has (say) a description and a number of days estimated for the project, you might do:或者,如果它有(比如说)项目的描述和估计的天数,你可以这样做:
<div>{project.description} - {project.days} {project.days === 1 ? "day" : "days"}</div>
And so on.等等。 The fundamental thing is to provide React with something it can put in the DOM (loosely, "display"), such as strings, numbers, arrays,
true
(but not false
)...最基本的事情是为 React 提供一些它可以放入 DOM 的东西(松散地,“显示”),例如字符串,数字,数组,
true
(但不是false
)......
You need to return array from your ProjectItem
ie you need to do this:您需要从
ProjectItem
返回数组,即您需要这样做:
const Project = () => {
const ProjectItem = () => (
ProjectenList.map(project => (
<div key={project.id}>
<div>{project}</div>
</div>
))
)
return (
<div className='project-kader'>
<h1 className='title'>{ProjectItem()}</h1>
</div>
)
}
try JSON.stringy(project) like this or you should use your object property.Let's we say project has a property that called name像这样尝试 JSON.stringy(project) 或者你应该使用你的对象属性。假设项目有一个名为 name 的属性
Here is a working example for you.这是一个适合您的工作示例。
const Project = () => {
const ProjectItem = () => (
ProjectenList.map(project => (
<div key={project.id}>
<div>{JSON.stringy(project)} || {project.name}</div>
</div>
))
)
return (
<div className='project-kader'>
<h1 className='title'><ProjectItem /></h1>
</div>
)
I hope it can work.我希望它可以工作。
you can use project as object into div element您可以将项目作为对象使用到 div 元素中
const ProjectItem = () => (
ProjectenList.map(project => (
<div key={project.id}>
<div>{project.text}</div>
</div>
))
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.