Question

我是开发的极端新手，因此我可能会缺少明显的东西。我正忙于创建一个简单的React应用来显示对象数组。我已经在父组件中对数组的一般概念进行了硬编码，并将其传递给子组件。但是，当我尝试将道具记录到控制台时，它首先以对象的形式出现，然后再次以未定义状态记录。这使得在其上调用Object.keys（）函数并尝试将其映射到数组真的很困难。

下面是代码示例：

export class Parent extends React.Component() {
  constructor(props) {
    super(props);
    this.state = {
      arr: []
    }
  }

  render() {
    return (
      <div>
        <child array={this.state.arr} />
      </div>
    )
  }
}

然后孩子跟随：

export class Child extends React.Component() {
  renderArray() {
    let arr = this.props.array;
    console.log(arr);
    return Object.keys(arr).map(arrayItem => {
      let title = arr[arrayItem];
      return <li key={title.id}> {title.name}</li>
    }
  }

  render() {
    return (
      <div>
        {this.renderArray()}
      </div>
    )
  }
}

如果我在子组件中的arr对象上调用console.log，它将正确返回道具。但是紧接着，它记录了“ undefined”的第二个实例。

编辑：关于空数组的很多评论。请参见下面的代码。

这是父组件。

import React, { Component } from 'react';
import './App.css';

import { SearchBar } from '../SearchBar/SearchBar.js';
import { SearchResults } from '../SearchResults/SearchResults.js';
import { Playlist } from '../Playlist/Playlist.js';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      searchResults: [
        {
          "id": 2011,
          "name": 'What Makes A Man',
          "artist": 'Man As Machine',
          "album": 'Nothing but a thing'
        },
        {
          "id": 2056,
          "name": 'Pushpin',
          "artist": 'Man As Machine',
          "album": 'Patterns'
        },
        {
          "id": 2099,
          "name": 'Zombie',
          "artist": 'Man As Machine',
          "album": 'Patterns'
        }
      ],
      playlistName: ''
    }
  }

  render() {
    return (
      <div>
        <h1>Ja<span className="highlight">mmm</span>ing</h1>
        <div className="App">
        <SearchBar />
          <div className="App-playlist">
            <SearchResults searchResults={this.state.searchResults}/>
            <Playlist />
        </div>
      </div>
    </div>
    );
  }
}

export default App;

然后我有了searchResults组件（子组件）：

import React from 'react';
import './SearchResults.css';

import { Tracklist } from '../Tracklist/Tracklist.js';

export class SearchResults extends React.Component {
  render () {
    return (
      <div className="SearchResults">
        <h2>Results</h2>
        <Tracklist tracks={this.props.searchResults}/>
      </div>
    )
  }
}

最后是跟踪列表组件：

import React from 'react';
import './Tracklist.css';

import { Track } from '../Track/Track.js';

export class Tracklist extends React.Component {
  constructor(props) {
    super(props);
  }

  renderTrackList() {
    let tracks = this.props.tracks;
    console.log(tracks);
    return Object.keys(tracks).map(track => {
      let trackItem = tracks[track];
      return <Track key={trackItem.id} track={trackItem}
    })
  }

  render () {
    return (
      <div className="TrackList">
        {this.renderTrackList()}
      </div>
    )
  }
}

这是searchBar组件：

import React from 'react';
import './SearchBar.css';

export class SearchBar extends React.Component {
  render() {
    return (
      <div className="SearchBar">
        <input placeholder="Enter A Song, Album, or Artist" />
        <a>SEARCH</a>
      </div>
    );
  }
}

这是“跟踪”组件：

import React from 'react';
import './Track.css';

export class Track extends React.Component {
  renderAction (isRemoval) {
    if (this.props.isRemoval){
      return <a className="Track-action" onClick={this.removeTrack}>-</a>
    } else {
      return <a className="Track-action" onClick={this.addTrack}>+</a>
    }
  }

  render () {
    return (
      <div className="Track">
        <div className="Track-information">
          <h3>{this.props.track.name}</h3>
          <p>{this.props.track.artist} | {this.props.track.album}</p>
        </div>
        <a className="Track-action">{this.renderAction}</a>
      </div>
    )
  }
}

Answer 1

您正在处理一系列事物，Object.keys()用于迭代对象属性键。

您可以直接使用map()在数组中进行迭代。

return arr.map(arrayItem => {
      let title = arr[arrayItem];
      return <li key={title.id}> {title.title}</li>
})

或者您可以做得更好，因为这里缺少<ul>元素

export class Child extends React.Component() {
  renderArray() {
    if(this.props.array && this.props.array.length >0){
      return (
        <ul>
          {this.props.array.map(item => <li key={item.id}>{item.title}</li>)
        </ul>
      )
    }
    return 'No item in array.'

  }

  render() {
    return (
      <div>
        {this.renderArray()}
      </div>
    )
  }
}

您必须在数组中放入一些数据

this.state={
 arr:[
   {id:1,title:"item 1"},
   {id:2,title:"item 2"}
 ]
}

Answer 2

子组件是子组件，但在调用时不是子组件。请尝试以下解决方案

  import Child from “./Child”;
  export class Parent extends React.Component() {
     constructor(props) {
         super(props);
         this.state = {
              arr: [
       {"id":1, name:"test"}, {"id": 2, "name": "test2"}
           ]
          }
      }

  render() {
     return (
         <div>
           <Child array={this.state.arr} />
         </div>
        )
    }
  }

子组件

 export class Child extends React.Component() {
       renderArray = (array) => {
           return array.map(item=> (
                <li key={item.id}> {item.name}</li>
            )
         }

     render() {
        const {array} = this.props;
         return (
           <div>
              <ul>
             {this.renderArray(array)}

             </ul>
         </div>
         )
      }
    }

请原谅我输入错误的双引号，因为我正在用手机接听

React组件记录对象，然后在同一对象上记录未定义

2 个答案: