React组件渲染报错原因排查：通过Props传递State至嵌套组件

我来帮你搞定这个问题！你已经在App组件里正确初始化了包含歌曲信息的searchResults状态，接下来只需要把这个状态通过props传递给嵌套组件，然后在嵌套组件里渲染出每一条结果就行。

首先，先把你提供的App.js代码格式化一下：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: [
        {name: 'Money Trees', artist: 'Kendrick Lamar', album: 'Album Title', id: '1234'},
        {name: 'Reptilia', artist: 'The Strokes', album: 'Is This It', id: '234'}
      ]
    };
  }

  render() {
    return (
      <div>
        <h1> Ja<span className="highlight">mmm</span>ing </h1>
        <div className="App">
          {/* 这里我们会添加嵌套组件，并传递props */}
        </div>
      </div>
    );
  }
}

接下来分两步完成：

1. 创建接收props的嵌套组件 #

首先，你需要一个用来渲染搜索结果的组件，比如命名为SearchResults，它会接收父组件传递过来的results props，然后遍历渲染每一条歌曲信息：

class SearchResults extends React.Component {
  render() {
    return (
      <div className="search-results">
        <h2>搜索结果</h2>
        {this.props.results.map(result => (
          <div key={result.id} className="result-item">
            <p><strong>歌曲名:</strong> {result.name}</p>
            <p><strong>歌手:</strong> {result.artist}</p>
            <p><strong>专辑:</strong> {result.album}</p>
            <hr />
          </div>
        ))}
      </div>
    );
  }
}

如果你偏好函数式组件的写法，也可以写成这样：

function SearchResults(props) {
  return (
    <div className="search-results">
      <h2>搜索结果</h2>
      {props.results.map(result => (
        <div key={result.id} className="result-item">
          <p><strong>歌曲名:</strong> {result.name}</p>
          <p><strong>歌手:</strong> {result.artist}</p>
          <p><strong>专辑:</strong> {result.album}</p>
          <hr />
        </div>
      ))}
    </div>
  );
}

2. 在App组件中传递State作为Props #

回到App组件的render方法里，把this.state.searchResults作为props传递给SearchResults组件：

render() {
  return (
    <div>
      <h1> Ja<span className="highlight">mmm</span>ing </h1>
      <div className="App">
        {/* 传递searchResults给嵌套组件 */}
        <SearchResults results={this.state.searchResults} />
      </div>
    </div>
  );
}

这样一来，App组件的state就通过props传递到了嵌套的SearchResults组件里，组件会自动根据state的变化重新渲染内容。

需要注意的小细节：遍历列表时一定要给每个子元素加上唯一的key属性（这里用了歌曲的id），这是React的要求，能提升渲染性能并避免警告。

内容的提问来源于stack exchange，提问作者user7496931