Question

我在将图像显示为列表时遇到问题。想知道为什么？我没有任何错误，所以我不知道如何解决这个问题

import React from 'react'
import ReactDOM from 'react-dom'

const friends = [
  {
    title: "Yummmmmmm",
    src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-monkeyweirdo.jpg"
  },
  {
    title: "Hey Guys!  Wait Up!",
    src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-earnestfrog.jpg"
  },
  {
    title: "Yikes",
    src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-alpaca.jpg"
  }
];

// New component class starts here:

我使用map函数来循环上面的object数据类型数组。我注入以提取密钥的值。

 class Friend extends React.Component{
  render(){
    let flist = friends.map((friend, i) =>{
      <li key={"friend_" + i}>
        <h1>{friend[i].title}</h1>
        <img src={friend[i].src} alt={friend[i].title} />
      </li>
    })
    return (<div>
                    <ul>{flist}</ul>
                </div>);
  }
}


ReactDOM.render(<Friend />, document.getElementById('app'));

Answer 1

您没有从map函数返回任何内容。尝试：

class Friend extends React.Component{
  render(){
    let flist = friends.map((friend) => (
      <li key={friend.title}>
        <h1>{friend.title}</h1>
        <img src={friend.src} alt={friend.title} />
      </li>
    ))
    return (
      <div>
        <ul>{flist}</ul>
      </div>
    );
  }
}

您也不需要选择像friend[i]这样的对象，因为您已经迭代了列表中的每个元素。

循环通过jsx的对象

1 个答案: