亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在 React 中顯示數組中的對象 [i]

在 React 中顯示數組中的對象 [i]

qq_遁去的一_1 2023-03-10 16:39:39
我想遍歷一個對象數組并在組件中顯示一個項目，其中 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: ''  },我無法讓它工作。代碼呈現頁面，但項目項應呈現的部分保持為空。我忽略了一些東西……但我做錯了什么？:-)
查看完整描述

3 回答

?
慕村225694

TA貢獻1880條經驗 獲得超4個贊

有兩個問題。


當您調用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>


查看完整回答
反對 回復 2023-03-10
?
斯蒂芬大帝

TA貢獻1827條經驗 獲得超8個贊

詳細說明最初的評論，因為代碼發生了變化：


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 等呈現的其他答案也適用。


查看完整回答
反對 回復 2023-03-10
?
飲歌長嘯

TA貢獻1951條經驗 獲得超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>

  )

}


查看完整回答
反對 回復 2023-03-10
  • 3 回答
  • 0 關注
  • 175 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號