Как найти объект в списке предметов по индексу, используя es6 (actjs)

Question

Я новичок в реакции и синтаксис es6, предположим, у меня есть список объектов, как показано ниже ( testData.js )

export const favourites=[
    {
        name: 'Jhon Doe',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    },
    {
        name: 'Micheal Douglas',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    },
    {
        name: 'Camille la cruz',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    },
    {
        name: 'The Rock',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    },
    {
        name: 'Daniel lacharmante',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    },
    {
        name: 'Alber Weiter',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    }

]

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

И скажем, я импортировал его в файл, скажем, test.js , поэтому для использования этого списка ясделано

    const favouritePersonList =favouritePersonData.map(person=>{
        return <Avatar key={person} avatarurl={person.avatarUrl} style={styles.favouritePersons} height={40} width={40} activity/>
     })

, что предполагает создание компонента списка аватаров, размещение необходимых реквизитов и т. Д. Теперь я хотел бы визуализировать первый объект / компонентв этом списке.Я пытался

render(
        <div>
        {favouritePersonList[0]}
        </div>
)

Но безуспешно, кто-нибудь может мне помочь?спасибо

По запросу, пожалуйста, найдите полный код аватара, учтите, что это реагирующий нативный код.

export default class Avatar extends React.Component {
    constructor(props){
        super(props)
        this.state={
            userState : '#1cdb4c'

        }
    }


    componentWillMount(){
        this.props.activity? this.setState({userState:'#1cdb4c'}): this.setState({userState:'#f93434'})
    }

    render() {
        const {height, width, avatarUrl}=this.props
      return (
        <View style={styles.container}>
        <View style={[styles.avatarContainer,{height:height,width:width}]}>
        <Image style={styles.avatarImg} 
        source={avatarUrl}
        
        />
        </View>
        <View style={[styles.userActivity,{height:height, width:width}]}>
        <View style={styles.outer}>
        <View style={[styles.inner,{backgroundColor:this.state.userState}]}/>
        </View>
        </View>
         </View>
      );
    }
  }

Answer 1

Как я сказал в комментариях, ваш код работает для простого случая.Вот оно:

const favourites = [
  {
    name: "Jhon Doe",
  },
  {
    name: "Micheal Douglas",
  },
  {
    name: "Camille la cruz",
  },
  {
    name: "The Rock",
  },
  {
    name: "Daniel lacharmante",
  },
  {
    name: "Alber Weiter",
  },
];

const Avatar = props => <div>{props.name}</div>;

const App = () => {
  const favouritePersonList = favourites.map( person => (
    <Avatar key={person.name} name={person.name} />
  ) );
  return <div>{favouritePersonList[ 0 ]}</div>;
};

ReactDOM.render( <App />, document.getElementById( "root" ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Итак, проблема должна быть в другом месте.Пожалуйста, поделитесь всем своим кодом с компонентом Avatar.

Обновление

Это слепое предложение, но в вашем компоненте Avatar вы используете source={avatarUrl} для Image.Здесь две проблемы.

1. Вы не используете реквизит.(Извините, я видел сейчас, вы деструктурируете его с this.props. Итак, просто измените имя деструктурирования.
2. Вы используете неправильное имя реквизита. Это должно быть avatarurl, так как вы проходитеэто так в родительском компоненте.

Итак, попробуйте так:

export default class Avatar extends React.Component {
    constructor(props){
        super(props)
        this.state={
            userState : '#1cdb4c'

        }
    }


    componentWillMount(){
        this.props.activity? this.setState({userState:'#1cdb4c'}): this.setState({userState:'#f93434'})
    }

    render() {
        const {height, width, avatarurl}=this.props
      return (
        <View style={styles.container}>
        <View style={[styles.avatarContainer,{height:height,width:width}]}>
        <Image style={styles.avatarImg} 
        source={avatarurl}

        />
        </View>
        <View style={[styles.userActivity,{height:height, width:width}]}>
        <View style={styles.outer}>
        <View style={[styles.inner,{backgroundColor:this.state.userState}]}/>
        </View>
        </View>
         </View>
      );
    }
  }

Answer 2

render(
  <div>
    {favouritePersonList[0]}
  </div>
)

Приведенный выше код будет пытаться визуализировать объект внутри div, что неверно.

Итак, приведенный выше код будет в основном выглядеть следующим образом:

render(
  <div>
    {
      name: 'Jhon Doe',
      avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    }
  </div>
)

Вы должны сделать что-то вроде

render(
  <div>
    <Avatar key={favouritePersonList[0]} avatarurl={favouritePersonList[0].avatarUrl} style={styles.favouritePersons} height={40} width={40} activity/>
  </div>
)

Answer 3

Думайте об этом, как будто вы просто вызываете функции JavaScript.Цикл for будет работать для вас, как показано ниже:

let avatarRows = [];
for (var i = 0; i < favourites.length; i++) {
    // note: we add a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    avatarRows.push(<Avatar key={favourites[i]} avatarurl={favourites[i].avatarUrl} style={styles.favouritePersons} height={40} width={40} activity/>);
}
return <div>{avatarRows}</div>;

или

return <div>{avatarRows[0]}</div>;

для первого компонента Avatar.

Answer 4

просто используйте это favouritePersonList вместо этого favouritePersonList[0], потому что вы хотите отобразить весь список, а не только один его элемент, поэтому ваш код будет

render() {
    return  (
      <div>
        {favouritePersonList}
      </div>
    )
}

Редактировать:

Я не заметил, что вы хотите отобразить только первый элемент

Самый простой способ - не использовать карту в первую очередь

render() {
    return (
      <div>
        {<Avatar avatarurl={favouritePersonData[0].avatarUrl} style={styles.favouritePersons} height={40} width={40} activity/>}
      </div>
    )
}

Answer 5

Это зависит от того, как вы хотите, чтобы ваш компонент отображался, но вы можете использовать что-то вроде этого:

render(
  <div>
     {favoritePersonList.map(person => {
       return (
         <div>
           <h1>{person.name}</h1>
           <img src={person.avatarUrl} alt={person.name}/>
         </div>
       )
     })}
  </div>
)

Answer 6

let favouritePersonList = []
favouritePersonData.foreach((person,index)=>{
        favouritePersonList[index] =  <Avatar key={person} avatarurl={person.avatarUrl} style={styles.favouritePersons} height={40} width={40} activity/>
     })

Я думаю, что это сработает для вас, но я не могу дать вам вескую причину, по которой ваш метид не сработал, мне пришлось бы создать пример и немного его протестировать