Javascript 简单的道具示例，但找不到道具

在阅读react一书的下一章时，我决定尝试构建一些代码来测试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;

Component-PropExample正在使用container/containee设计模式。因此，它有两个组成部分，即PropX和Card。PropX父级从api获取数据并更新其状态。卡片通过道具接收数据并呈现

两个组件的代码如下所示：

/*
  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 |       )

删除此选项并不能解决问题。谁能告诉我这有什么问题吗

---

我还尝试使用与-save一起安装的material ui，但到目前为止我还没有使用任何组件，因为我不明白为什么我没有数据。

您的问题在于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作为一个属性分配给它，以便稍后当您传递它时，它会被实际分配

  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
      }]
    }
  }

当然，现在当你打电话时，卡上的地图会出现另一个错误。您可能想做的是将此.state.data传递给卡

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

---

您试图传递给卡片组件对象this.state而不是数组this.state.data的PropX组件中的问题。试一试：我以前做过，但得到了一个不同的错误。在构造函数中使用this.state=而不是state:并最终确保数据是数组：。thendata=>{//console.log数据是${data}this.setState{data}}@Callat。您是否设法修复了它？所以您说的不是state，而是state，改为this.state？@Callat更新了。你不应该看到有什么不同。在你有一个未分配的状态之前。现在您有了一个指定的state@Callat更新了关于的错误修复。地图不是一个功能，就像一个符咒！因此需要A this.state.whateVerthingState来指定要迭代的状态的哪一部分，而B state必须被分配this.state正确吗？