Question

我从本地服务器获取数据，使用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;

开发人员工具浏览器说： TypeError：_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;

Answer 1

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

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

更新：

这里您将其作为stateData而不是tabData传递尝试props.stateData

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

1 个答案: