如何将状态作为道具传递？（未定义的错误）

Question

应用程序.js：

import './App.css';

import HttpService from '../services/http-service'

import React, { Component } from 'react';

const http = new HttpService()

class App extends Component {

  constructor(props){

    super(props)

    this.state = {accounts: ""}

    this.loadData = this.loadData.bind(this)

  }

  

  loadData = () => {

    http.getAccounts().then(res =>{

      this.setState({accounts: res})

      console.log(this.accounts)

      return res

    }, err => {console.log(err)})

  }

   

  render() {return (

    <div className="container">

      <h1 className="title">Retail API</h1>

        <DisplayAcc accounts = {this.accounts} />

    </div>

  )}

}

export default App;

在 DisplayAcc 上，我的构造函数中有一个 console.log(this.props.accounts) 。输出未定义。我应该怎么办？我尝试添加这些行：

componentDidMount(){

    this.loadData = this.loadData.bind(this)

  }

仍然未定义。请指出错误，或者如果您有任何建议/最佳实践，我将非常感激，因为我对此很陌生。谢谢！

Answer 1

为了访问accounts从 App 组件传递到 DisplayAcc 组件的状态：render() {return (&nbsp; &nbsp; <div className="container">&nbsp; &nbsp; &nbsp; <h1 className="title">Retail API</h1>&nbsp; &nbsp; &nbsp; &nbsp; <DisplayAcc accounts = {this.state.accounts} />&nbsp; &nbsp; </div>&nbsp; )}

Answer 2

我没有看到在哪里loadData被调用，这让我对 的价值产生怀疑accounts。一致性是关键：如果accounts是组件状态的一部分，那么您应该通过 访问它this.state.accounts，而不是this.accounts。请注意，你是console.log有意义的。因此，如果您想检查this.account，就没有点打印res，正如您在评论中提到的那样。

Answer 3

您应该能够通过尝试通过this.accounts&nbsp;更改来访问该状态：this.state.accounts现在社区更流行使用所谓的函数式组件。通过这种方法，您不需要构造函数，真的建议您阅读此内容，因为它将大大简化您的代码！

Answer 4

首先，this.loadData = this.loadData.bind(this)是不必要的，因为loadData是一个箭头函数。其次，setState它是一个异步函数，因此您无法在调用它后立即读取新状态。因此，以下控制台日志将是undefinedthis.setState({accounts:&nbsp;res}) console.log(this.accounts)&nbsp;//&nbsp;also&nbsp;this&nbsp;must&nbsp;be&nbsp;this.state.accounts!此外，您试图以错误的方式获取状态值，它必须是：<DisplayAcc&nbsp;accounts={this.state.accounts}&nbsp;/>如果您想在DisplayAcc组件中读取帐户 prop，您应该将控制台日志添加到 或render方法componentDidUpate中，因为constructor仅在第一次渲染时调用，并且accounts当时您的 props 为空。但是我提到的那些每次道具改变时都会被调用。