reactjs - 反应：道具数据未传递给子组件

问题描述

我在 React 中有 2 个组件，一个父组件和一个子组件。我正在从父组件中的 API 获取数据，并且我想将其传递给子组件。数据获取成功，可以在console.log()中查看数据。数据随后存储在父状态中（我也已验证并在控制台日志中查看它。

根据我数据中的数组数量，我想创建相应数量的子组件。

我最初使用这个功能

               {
                    this.state.tables.map((item) => (                    
                        <App data = {this.state.tables} />
                    ))
                }

尝试将数据映射到我的子组件。当数据没有通过时，我试图简单地将一个数组（从我的状态）传递到我的子组件

<App data={this.state.tables}/> //App here is my child component

但无济于事。当我控制台日志

props

在我的子组件中，这就是我得到的，我试图通过的道具数据没有通过

{history: {…}, location: {…}, match: {…}, staticContext: undefined}
history: {length: 7, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …}
location: {pathname: "/table", search: "", hash: "", state: undefined, key: "bixd4p"}
match: {path: "/table", url: "/table", isExact: true, params: {…}}
staticContext: undefined
__proto__: Object

当我在子组件的构造函数或 componentDidMount() 中使用 console.log(props.data) 时，我得到

undefined

为什么我的子组件无法通过 this.props.data 访问数据？

下面附上我的父组件和子组件的代码，以便更好地参考

家长

render(){
  return (
      <div>
                {
                    this.state.tables.map((item) => (                    
                        <App data = {this.state.tables} />
                    ))
                }

              <App data={this.state.tables}/>


                <Button style = {{marginTop : 80, marginRight : 30, float : "right"}} variant="contained" color="primary" onClick={() => this.addnewtable()}>
                    Add New Table
                </Button>
      </div>
  );

  }

孩子

constructor(props) {
        super(props)
        console.log("constructor", this.props)
        console.log("props", this.props.data)
        this.state = {
            users: [],
            message: null
        }
        this.reloadUserList = this.reloadUserList.bind(this);
    }

标签： reactjsparent-child

reactjs - 反应：道具数据未传递给子组件

问题描述

解决方案

推荐阅读