在 React 中显示数组中的对象 [i]

Question

我想遍历一个对象数组并在组件中显示一个项目，其中 prop 是数组项目的索引号。这是我的代码：import React from 'react';import './projecten.scss';import Layout from './../Layout/Layout';import { ProjectenLijst } from '../../../data';const Projecten = () => {  const ProjectItem = ({i}) => (    <div>{ProjectenLijst[i]}</div>  )  return (    <Layout>      <ProjectItem i={2}/> // here I want to set the index number of the array    </Layout>  )}export default Projecten;这是我从中提取数据的数据文件：export const ProjectenLijst = [  {    naam: 'Project 1',    id: 1,    wat: 'website',    url: 'https://www.project1.com',    platform: 'WordPress',    omschrijving: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit magna leo, sit amet bibendum risus tincidunt non. Duis vitae ligula vel felis tincidunt facilisis. Maecenas interdum ligula ut vestibulum scelerisque. Aenean vestibulum ultrices augue. Mauris nec aliquam nulla, quis ultrices arcu. Aliquam fringilla.',    img: ''  },  {    naam: 'Project 2',    id: 2,    wat: 'website',    url: 'https://www.project2.com',    platform: 'WordPress',    omschrijving: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit magna leo, sit amet bibendum risus tincidunt non. Duis vitae ligula vel felis tincidunt facilisis. Maecenas interdum ligula ut vestibulum scelerisque. Aenean vestibulum ultrices augue. Mauris nec aliquam nulla, quis ultrices arcu. Aliquam fringilla.',    img: ''  },我无法让它工作。代码呈现页面，但项目项应呈现的部分保持为空。我忽略了一些东西……但我做错了什么？:-)

Answer 1

有两个问题。

当您调用ProjectenLijstusing时，您必须使用大括号<ProjectItem i={2} />提取属性：i

const ProjectItem = (i) => (/* ... */);

// should be

const ProjectItem = ({i}) => (/* ... */);

请参阅解构赋值 - 对象解构

您不能渲染复杂的对象，只能渲染标量值。意思是：

<div>{ProjectenLijst[i]}</div>

// should for example be

<div>{ProjectenLijst[i].naam}</div>

// mock

const Layout = (props) => <div {...props} />;

const ProjectenLijst = [

  { naam: 'Project 1', id: 1 },

  { naam: 'Project 2', id: 2 },

  { naam: 'Project 3', id: 3 },

];

// answer

const Projecten = () => {

  const ProjectItem = ({i}) => (        // extract the "i" property by using curly braces

    <div>{ProjectenLijst[i].naam}</div> // refer to a scalar property, not the whole object

  );

  return (

    <Layout>

      <ProjectItem i={2} />

    </Layout>

  );

};

ReactDOM.render(<Projecten />, document.querySelector("#root"));

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

详细说明最初的评论，因为代码发生了变化：

const ProjectItem = ({i}) => (

  <div>{ProjectenLijst[{i}]}</div>

)

首先，您制作了一个功能组件，因此您可以调用：

<ProjectItem i={0} foo="foo" bar="bar">

让我们重写功能组件以不破坏参数：

const ProjectItem = (props)=> {

  console.log(props.i) //0

  console.log(props.foo) //"foo"

  console.log(props.bar) //"bar"

  ...

}

由于我们只需要iprop/key，我们可以解构它，包括参数：

const ProjectItem = ({i})=>{...}

或者在函数内部，假设我们想将整个 props 对象传递给另一个组件：

const ProjectItem = (props)=>{

  const {i,foo} = props //to use locally

  const aThing = thingMaker(props)

  ...

}

让我们提醒自己如何索引数组：

const i = 0

const someObject = { i: i }

const alternatively = { i } //shorthand to {i:i}

const someArray = [0,1,2,3]

console.log(someArray[ i ]) //0 first element

console.log(someArray[ someObject ]) //i think it will be undefined, 

简单地说，你不能用一个对象索引到数组中。

将所有这些应用到您的原始代码段中，并删除大部分速记

const ProjectItem = (props)=>{

  // get the index

  const { i } = props          //destructure

  const { i: myIndex } = props //destructure and alias

  const _i = props.i           //same thing no destructuring

  // get the item (use any of these)

  const myItem0 = ProjectenLijst[i]

  const myItem1 = ProjectenLijst[props.i]

  const myItem2 = ProjectenLijst[myIndex]

  const myItem3 = ProjectenLijst[_i]

  //JSX

  return <div> 

   { myItem0 } 

  </div> 

 

}

请注意，{ myItem0 }您有一组大括号{}，中间有一个变量。

所以回顾一下，你在做什么：

const ProjectItem = ({i}) => (

  <div>{ProjectenLijst[{i}]}</div>

)

是：

const ProjectItem = (props)=> {

  const someArbitraryObject = { i: props.i }

  const item = ProjectenLijst[ someArbitraryObject ]

  console.log(someArbitraryObject) // { i: 0 }

  console.log(item) // undefined

  return <div>{item}</div>

}

这只是原始代码的问题之一 -索引到数组和解构。关于什么可以用 JSX 等呈现的其他答案也适用。

Answer 3

import React from 'react';

import './projecten.scss';

import Layout from './../Layout/Layout';

import { ProjectenLijst } from '../../../data';

const Projecten = () => {

  const ProjectItem = (i) => (

    <div>{ProjectenLijst[i].name}</div>

  )

  return (

    <Layout>

      {ProjectenLijst.map((item, index) => {

         return <ProjectItem i={index}/>

      })}

    </Layout>

  )

}

export default Projecten;

或者

import React from 'react';

import './projecten.scss';

import Layout from './../Layout/Layout';

import { ProjectenLijst } from '../../../data';

const Projecten = () => {

  const ProjectItem = (item) => (

    <div>{item.name}</div>

  )

  return (

    <Layout>

      {ProjectenLijst.map(item => {

         return <ProjectItem item={item}/>

      })}

    </Layout>

  )

}