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

Posted 2023-02-23

【中文标题】在 React 的子组件中将状态作为道具传递

【英文标题】：pass state as props in component child in 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;

【参考方案1】：

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

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

更新：

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