Question

我正在从父级的api中获取数据，并将该数据作为道具发送给子级组件。当我尝试安慰道具时，它会返回null。不知道为什么。但是当再次渲染子组件时，道具就会显示出来

这是父组件

componentWillMount(){
        fetch('http://13.234.252.37:5000/api/user_information/'+ this.props.propUser_id)
        .then(response => response.json())
        .then(data => {
            console.log(data);
            this.setState({fileUploadedData: data.Documents, dashboardPiscore: data.piscore}, () => {
                console.log("set sytate", this.state.fileUploadedData);
            })
        })
    }

return(
this.state.dashboardHome ? <DashboardHome analysisData={this.state.fileUploadedData} /> : null 
)

这是子组件

class dashboardHome extends Component{
  constructor(props){
    super(props);
    console.log("props in cons", this.props);
    this.state= {
      annualIncome: '0',
      monthlyExpense: '0',
      monthlySavings: '0',
    }
  }

  componentDidMount(){
    console.log("props in home", this.props);
    if(this.props.analysisData !== null) 
    {
      this.setState({
      annualIncome: this.props.analysisData[0].Salary,
      monthlyExpense: this.props.analysisData[1].average_monthly_expense,
      monthlySavings: this.props.analysisData[1].average_monthly_savings
      })
 render(){  
return(
<div>//dashboard</div>
)
}

第一次在组件渲染道具时将其设置为null。当我再次渲染它时，props值被设置。请帮我解决在组件第一次渲染时设置道具的问题。道具现在为空。当我单击仪表板的其他标签并再次返回到仪表板时，道具已按预期正确设置

Answer 1

通常建议使用componentDidMount代替componentWillMount。另外，您说自己是从Api获取数据。当然，在获取和存储数据之前，传递给孩子的初始道具将为空。如果这引起问题，则可以考虑在实际数据到达之前使用一些默认值。或者，您也无法在数据到达之前完全渲染子组件并显示加载指示符。

Answer 2

您可以为条件添加短路吗？

this.state.dashboardHome && this.state.dashboardHome ?

因此它将第一次忽略它，因为它最初将评估为false，然后在第二个渲染中它将看到数据，解析为true，然后运行其余的三进制语句。这样，您将不会收到错误消息。使用挂钩时我遇到了这个问题，通常可以解决。

https://reactjs.org/docs/conditional-rendering.html 内联如果带有逻辑&&运算符部分

子组件返回的道具为空

2 个答案: