javascript - 简单的 prop 示例，但未找到 props

Question

在阅读 React 书中的下一章时，我决定尝试构建一些代码来测试 props 在 React 中的工作原理。我有以下应用程序:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// Import Component
import PropExample from './simple-props'
const ctitle = "Sample app"
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">{ctitle}</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div className='custom-components-list'>
          <PropExample />
        </div>
      </div>
    );
  }
}

export default App;

组件PropExample正在利用容器/容器设计模式。因此它有两个组件 PropX 和 Card。 PropX 父级从 api 获取数据并更新其状态。卡通过 props 接收该数据并渲染它。

两个组件的代码如下:

/*
  Simple component to read from api and present data
  Propx to get data from api and function as container to Card component
  Card component to present data to UI and leverage material ui
*/
import React, {Component} from 'react'
import Card from './card'
class PropX extends Component{
  constructor(props){
    super(props)
    state:{
      data:[{
        name: 'Grrot',
        city: "grav",
        zip: 32453
      },{
        name: 'Grrot',
        city: "grav",
        zip: 32453
      },{
        name: 'Grrot',
        city: "grav",
        zip: 32453
      }]
    }
  }
  //Lifecycle hook that will grab data right before component is mounted to the dom
  componentWillMount(){
    let url = 'https://jsonplaceholder.typicode.com/users'
    fetch(url)
    .then((res)=>{ // Note that this a response object, need to look more into promises, fetch api and response object in javascript
      //console.log(`The response is ${res}`)
      return res.json()
    })
    .then(data => {
      //console.log(`The data is ${data}`)
      this.setState({data})
    })
    .catch(err=>{
      console.log(`The error is ${err}`)
    })
  }

  render(){
    return(
      <div>
        <Card data={this.state}/>
      </div>
    )
  }
}
export default PropX

和卡:

/*
  Card component
  Reads data fetched from  parent PropX
  Produces Cards with sylized data
*/
import React, {Component} from 'react'
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
import ImageIcon from '@material-ui/icons/Image';
import WorkIcon from '@material-ui/icons/Work';

class Card extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
    <ul>
      {this.props.data.map(i => {
        return (
          <li key={i}> {i.name}</li>
        )
      })}
    </ul>
    )
  }
}
export default Card

当我运行此程序时，出现以下错误:

TypeError: Cannot read property 'map' of null
Card.render
card.js:21
  18 | render(){
  19 |   return(
  20 |   <ul>
> 21 |     {this.props.data.map(i => {
  22 |       return (
  23 |         <li key={i}> {i.name}</li>
  24 |       )

删除这个并不能解决问题。谁能告诉我这有什么问题吗？

我也尝试使用material ui(通过--save安装)，但我还没有使用任何组件，因为我不明白为什么我没有数据。

Answer 1

你的问题出在 PropX 的构造函数中

  constructor(props){
    super(props)
    state:{ // okay... so this is referenced where?
      data:[{
        name: 'Grrot',
        city: "grav",
        zip: 32453
      },{
        name: 'Grrot',
        city: "grav",
        zip: 32453
      },{
        name: 'Grrot',
        city: "grav",
        zip: 32453
      }]
    }
  }

您需要在构造函数中将 state 分配为 this 的属性，以便稍后在传递它时，它实际上已被分配

  constructor(props){
    super(props)
    this.state = { // now it's this.state
      data:[{
        name: 'Grrot',
        city: "grav",
        zip: 32453
      },{
        name: 'Grrot',
        city: "grav",
        zip: 32453
      },{
        name: 'Grrot',
        city: "grav",
        zip: 32453
      }]
    }
  }

当然，现在当您在卡片中调用 .map() 时，您会收到不同的错误。您可能想要做的是将 this.state.data 传递给卡

render(){
  return(
    <div>
      <Card data={this.state.data}/>
    </div>
  )
}