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

Question

我是一个极端的开发新手，因此我可能会错过一些明显的东西。我正忙于创建一个简单的 React 应用程序来显示对象数组。我已经在父组件中硬编码了数组的一般概念，并将其传递给子组件。但是，当我尝试将 prop 记录到控制台时，它首先显示为对象应该显示，然后再次记录为未定义。这使得在其上调用 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，它会正确返回 props。但紧接着，它会记录"未定义"的第二个实例。

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

这是父组件。

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; 

然后我有搜索结果组件(子(：

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>
)
}
}

这是搜索栏组件：

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

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

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>
)
}
}

请原谅我错误的双引号，因为我正在接听电话