Дочерний компонент возвращает реквизиты как ноль

Question

Я получаю данные из API в родительском элементе и отправляю данные как реквизит для дочернего компонента.Когда я пытаюсь утешить реквизит, он возвращает ноль.Не знаю почему.Но реквизиты отображаются при повторном рендеринге дочернего компонента

Это родительский компонент

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>
)
}

Впервыекогда компонент рендерит реквизиты утешается как ноль.Когда я рендеринг снова, значение реквизита установлены.Пожалуйста, помогите мне с установкой реквизита при первом рендеринге компонента.Реквизит сейчас нулевой.Когда я нажимаю на другую вкладку панели инструментов и снова возвращаюсь к панели инструментов, реквизиты устанавливаются правильно, как и ожидалось

Answer 1

Обычно рекомендуется использовать componentDidMount вместо componentWillMount.Кроме того, вы сами сказали, что получаете данные от Api.Прежде чем данные будут извлечены и сохранены в состоянии, конечно, начальные реквизиты, переданные потомку, будут пустыми.Если это вызывает проблемы, вы можете рассмотреть возможность использования некоторых значений по умолчанию до получения реальных данных.Или же вы можете вообще не отображать дочерний компонент до поступления данных и показывать индикатор загрузки.

Answer 2

Вы могли бы добавить короткое замыкание к вашей условной?

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

Таким образом, он проигнорирует его в первый раз, потому что сначала он будет иметь значение false, затем при втором рендеринге он увидит данные, преобразуется в true и выполнит оставшуюся часть троичного оператора. Таким образом, вы не получите ошибку. У меня возникает эта проблема при использовании хуков, и обычно она исправляется.

https://reactjs.org/docs/conditional-rendering.html Встроенный Если с разделом «Логический && Оператор»