在 React 的子组件中将状态作为道具传递答案

【问题标题】：pass state as props in component child in React在 React 的子组件中将状态作为道具传递
【发布时间】：2019-02-20 04:42:39
【问题描述】：

我从本地服务器获取数据，使用 axios.get 捕获它们，并将它们保存在我的状态中。没关系，但是当我想将它作为组件子项中的道具传递时，KABOOM！不工作。我正在寻找解决方案，我认为这是 lyfecycle 问题，但我不确定。

App.js

import React, { Component } from 'react';
import './style/App.css';
import axios from 'axios'
import Table from './Components/Table'


class App extends Component {

    state = {
      tabData: [],
    }

    componentWillMount = () => {
      this.getDataFromServer()
    }

    getDataFromServer = () => {
      axios.get("http://localhost:8000")
      .then((response) => {
        const twentyObj = response.data.splice(-20);
        this.setState({
          tabData:twentyObj
        })
        console.log(this.state.tabData)
      })
        .catch(function (error) {
          console.log(error);
        })
    }


  render() {

    return (
      <div className="App">

        <Table stateData={this.state.tabData}/>

      </div>
    );
  }
}

export default App;

开发者工具浏览器说：类型错误：_this.props 未定义（对于 Table.js 中的 this.props.tabData.map）

Table.js

import React from 'react';
import Cell from './Cell'


const Table = (props) => {


    return(

        <div>
        {this.props.tabData.map( item => 
          <Cell key={item.index}
                time={item.timestamp}
                nasdaq={item.stocks.NASDAQ}
                cac40={item.stocks.CAC40}/>
        )}
      </div>
    )
}

export default Table;

【问题讨论】：

标签： components state create-react-app react-props

【解决方案1】：

Table 是功能组件this 在那里没有任何价值，这就是错误消息告诉你的内容。

您应该使用props.tabData 而不是this.props.tabData

更新：

在这里你将它作为 stateData 而不是 tabData 尝试 props.stateData

【讨论】：