React.js - 无法从组件中获取特定的道具

Question

所以，我已经硬编码了父组件的状态，在将它传递到子组件后，我无法检索它的子组件。 另一方面，如果我通过它工作的状态以外的任何其他道具。

这是子组件：

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


class SearchResults extends React.Component {

render(){

 let searchresults=   this.props.searchresults;
    
        


return(
<div className= "searchresults">

<h2>Weather</h2>
<h3>Temprature:{searchresults.main.temp} </h3>
<h3>Temperature minimum: 25 degrees</h3>
<h3>Temperature maximum: 40 degrees</h3>
<h3>Humidity: 81% </h3>
</div>

)

}

}

export default SearchResults;

这是父组件：

import React from 'react';

import './App.css';
import SearchBar from '../searchbar/searchbar'
import SearchResults from '../SearchResults/searchresults'

class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      searchresults:[{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"base":"stations",
      "main":{"temp":280.32,"pressure":1012,"humidity":81,"temp_min":279.15,"temp_max":281.15
    },"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600,"sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"name":"London","cod":200}]
    }
  }

  render(){
  return (
    <div className="App">
      <header className="App-header">
       <h1>Wanderer</h1> 
      </header>
      <SearchBar />

      <SearchResults searchresults ={this.state.searchresults}
                        />
    </div>
  );
}
}

export default App;

这是我得到的错误：

类型错误：无法读取未定义 SearchResults.render F:/rishit/wanderer/src/components/SearchResults/searchresults.js:18 的属性“temp”

Answer 1

由于searchresults与一个项目的家长，你可以通过它，如：

 <SearchResults searchresults ={this.state.searchresults[0]} />

Answer 2

searchResults 是一个数组，它应该是 searchresults[0].main.temp

<h3>Temprature:{searchresults[0].main.temp} </h3>

Answer 3

这里，searchresults 是一个数组。 您需要提供索引才能访问元素。 您可以使用 searchresults[0].main.temp 但这不是最好的方法，也不是如果 searchresults 有多个元素的解决方案。 我会通过以下方式做到这一点。

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


class SearchResults extends React.Component {

render(){
 return(
  this.props.searchresults.map((searchResult) => (
    <div className= "searchresults">
      <h2>Weather</h2>
      <h3>Temprature:{searchResult.main.temp}</h3>
      <h3>Temperature minimum: 25 degrees</h3>
      <h3>Temperature maximum: 40 degrees</h3>
      <h3>Humidity: 81% </h3>
    </div>
   ))  
  )
 }
}

我希望它有效。