如何从app.js调用列表到react js中的组件

Question

我正在尝试在组件中设置一种状态并将该列表从一个组件传输到另一个组件。但出现控制台错误，因为 List.map() 不是一个函数！

我正在尝试使用 React js 将网页获取为

App.js：

import GoogleSuggestions from './components/GoogleSuggestions'

import './App.css'

const suggestionsList = [
  {id: 1, suggestion: 'Price of Ethereum'},
  {id: 2, suggestion: 'Oculus Quest 2 specs'},
  {id: 3, suggestion: 'Tesla Share Price'},
  {id: 4, suggestion: 'Price of Ethereum today'},
  {id: 5, suggestion: 'Latest trends in AI'},
  {id: 6, suggestion: 'Latest trends in ML'},
]

const App = () => <GoogleSuggestions suggestionsList={suggestionsList} />

export default App

组件/Google建议：

// Write your code here
import {Component} from 'react'

import SuggestionItem from '../SuggestionItem'

import './index.css'

class GoogleSuggestions extends Component {
  state = {suggestionsList: this.props, searchInput: ''}

  showoptions = event => {
    this.setState({searchInput: event.target.value})
  }

  render() {
    const {suggestionsList, searchInput} = this.state
    console.log(typeof suggestionsList)
    return (
      <div className="bg-container">
        <img
          className="googleLogo"
          src="https://assets.ccbp.in/frontend/react-js/google-logo.png"
          alt="google logo"
        />
        <div className="input-container">
          <div>
            <img
              className="search-icon"
              src="https://assets.ccbp.in/frontend/react-js/google-search-icon.png"
              alt="search icon"
            />
            <input
              type="search"
              value={searchInput}
              onClick={this.showoptions}
              className="input"
              placeholder="Search Google"
            />
          </div>
          <ul className="ul-cont">
            {suggestionsList.map(eachItem => (
              <SuggestionItem itemDetails={eachItem} key={eachItem.id} />
            ))}
          </ul>
        </div>
      </div>
    )
  }
}

export default GoogleSuggestions

建议项目

// Write your code here 
import {Component} from 'react' 
import './index.css'  
class SuggestionItem extends Component {
   render() {
     const {itemDetails} = this.props
     const {id, suggestion} = itemDetails
     return (
       <li>
         <div className="Item-cont">
           <p>{suggestion}</p>
           <img
             src="https://assets.ccbp.in/frontend/react-js/diagonal-arrow-left-up.png"
             alt="arrow"
           />
         </div>
       </li>
     )
   }
}
export default SuggestionItem

我希望将列表发送到组件/GoogleSuggestions，但作为对象获取。

Answer 1

您在子组件中错误地分配了列表。应该是

this.props.suggestionsList

class GoogleSuggestions extends Component {
  state = {suggestionsList: this.props.suggestionsList, searchInput: ''}
}