ReactJS 在渲染组件时表现得很奇怪

Posted 2023-02-22

【中文标题】ReactJS 在渲染组件时表现得很奇怪

【英文标题】：ReactJS acting weird when rendering component

【发布时间】：2018-06-05 19:14:50

【问题描述】：

在将 map() 函数与 ReactJS 一起使用时，我遇到了奇怪的问题。我将 3 个对象的数组硬编码到我的 App 状态中，当我尝试遍历每个对象时，我可以在控制台中看到数据。看起来TrackList.js 再次被渲染，然后吐出一个未定义的错误。 这是我的主要文件：

App.js:

import React,  Component  from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';
// import songs from './songs.js';

class App extends Component 
  constructor(props) 
    super(props);
    this.state = 
      searchResults: [
        
          "id": 1,
          "name": "Roses",
          "artist": "The Chainsmokers",
          "album": "Unknown",
          "isRemoval": false
        ,
        
          "id": 2,
          "name": "Fight Song",
          "artist": "Rachel Platten",
          "album": "None",
          "isRemoval": false
        ,
        
          "id": 3,
          "name": "Thunder",
          "artist": "Imagine Dragons",
          "album": "Evolve",
          "isRemoval": false
        
      ]
    ;
  

  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.js:

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

class SearchResults extends React.Component 
  render() 
    return (
      <div className="SearchResults">
        <h2>Results</h2>
        <TrackList tracks=this.props.searchResults />
      </div>
    );
  


export default SearchResults;

TrackList.js:

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


class TrackList extends React.Component 
  render() 
    return (
      <div className="TrackList">
          console.log("Tracks:")
          console.log(this.props.tracks)
          
            this.props.tracks.map(track => 
              return <Track track=track key=track.id />;
            )
          
      </div>
    );
  


export default TrackList;

Track.js:

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


class Track extends React.Component 
  constructor(props) 
    super(props);
    this.renderAction = this.renderAction.bind(this);
  

  renderAction(isRemoval) 
    if (isRemoval) 
      return "-";
    
    return "+";
  

  render() 
    return (
      <div className="Track">
        <div className="Track-information">
        console.log("Each track:")
        console.log(this.props.track)
          <h3>this.props.track.name</h3>
          <p>this.props.track.artist | this.props.track.album</p>
        </div>
        <a className="Track-action">this.renderAction(this.props.track.isRemoval)</a>
      </div>
    );
  


export default Track;

Console.log():

Tracks:
Array [ …, …, … ]
Each track:
Object  id: 1, name: "Roses", artist: "The Chainsmokers", album: "Unknown" 
Each track:
Object  id: 2, name: "Fight Song", artist: "Rachel Platten", album: "None" 
Each track:
Object  id: 3, name: "Thunder", artist: "Imagine Dragons", album: "Evolve" 
Tracks:
undefined
TypeError: this.props.tracks is undefined

【问题讨论】：

也许检查 this.props.tracks 是否未定义，如果是则返回 null。我不确定你为什么在这里得到一个 undefined，但我知道 React 会渲染组件几次。

我发现了一个问题。它是由另一个我没有列出的组件调用的，我认为这与它无关，因为我在使用 App 组件状态时没有触及它。感谢您的快速回复

太棒了！那些你认为你检查了所有东西的问题，除了一个地方最糟糕：D我们都不止一次。

是的，我花了 3 个小时才在这里发帖。然后又过了 10 分钟，我自己发现了问题：D

【参考方案1】：

尝试将this.props.tracks.map(track => 行替换为以下行，

this.props.tracks && this.props.tracks.map(track => 
    // code continues