将数据传递给另一个组件不起作用答案

【问题标题】：Passing data to another component does not working将数据传递给另一个组件不起作用
【发布时间】：2020-01-12 21:44:49
【问题描述】：

首先，我对 React 和开发 React 应用程序非常陌生。在我的应用程序中，我从 componentDidmount()

中的 api 获取数据

constructor(props){
    super(props);
    this.state={
       employeeData:[]
    }
}
  componentDidMount(){
      axios.get("http://localhost:8080/hris/api/employee/123456/personal?authToken=ldkasjfdsoue",  
      )
      .then(response => response.data)
      .then((data) => {  

       this.setState({ employeeData: data },()=> 
     //console.log("dfdf"+JSON.stringify(this.state.employeeData['employeeID']))) 
**// i am getting the data here**
       })
      .catch(err=> console.log("whyerror"+err)) 

    }

我将这些数据存储到状态中。但是当我想将数据发送到另一个组件时，发生错误。

      {console.log("isdata"+JSON.stringify(this.state.employeeData))}
   {/* {<Table data={this.state.employeeData}/> } */}

我在这里获取所有数据，但是当我这样做时

   {console.log("isdata"+JSON.stringify(this.state.employeeData))}
   {<Table data={this.state.employeeData}/> }

Table.js

constructor(props){  

      super(props);
      console.log('thisprops'+JSON.stringify(props))  //giving null value


    }

这表明 Table 组件收到了 null 道具。现在如何将数据传递给 Table 组件？

【问题讨论】：

标签： reactjs

【解决方案1】：

发生了什么错误？ employeeData 是一个数组吗？如果是这样，那么您可以将初始的employeeData 设为一个空数组，例如；

ParentComponent.jsx

export class ParentComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      employeeData: []
    }
  }

 componentDidMount(){
      axios.get("http://localhost:8080/hris/api/employee/123456/personal?authToken=ldkasjfdsoue",  
      )
      .then(response => response.data)
      .then((data) => {this.setState({ employeeData: JSON.stringify(data)})
      .catch(err=> console.log("whyerror"+err)) 
    }

  render(){
    return (
       <Table data={this.state.employeeData}/>
    )
  }
}

Table.jsx

export class Table extends Component {
  componentDidMount(){
     console.log(this.props.data) // it should be here
  }

  render(){
    return (
       {  
         this.props.data && this.props.data.map((employee) => {
            ...
         })
       }
    )
  }
}

【讨论】：

您能再试一次，看看在 Table 组件的 componentDidMount 上有哪些控制台日志吗？
其实我找到了解决办法！谢谢！ componentDidmount() 将进行两次渲染。所以第一个是空数据而不获取数据。第二个是获取数据。我只是做了一个逻辑，如果this.employee.data为null或者为空，渲染不会加载。

【解决方案2】：

<Table data={this.state.employeeData}/> 不需要用括号括起来，这是 JSX 而不是 javascript

最好还是这样做 <Table data={JSON.stringify(this.state.employeeData)}/> 避免独立代码

【讨论】：

我的文件扩展名是file.js类型
@ShakirUzZaman 你试过这个吗，我认为你不必更改文件扩展名，无论如何它应该可以工作。
我想我不必更改文件扩展名@NoriodeRaphael
其实我找到了确切的问题。谢谢大家！