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

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 (

    <div className="container">

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

        <DisplayAcc accounts = {this.state.accounts} />

    </div>

  )}

Answer 2

1. 我没有看到在哪里loadData被调用，这让我对 的价值产生怀疑accounts。

2. 一致性是关键：如果accounts是组件状态的一部分，那么您应该通过 访问它this.state.accounts，而不是this.accounts。

3. 请注意，你是console.log有意义的。因此，如果您想检查this.account，就没有点打印res，正如您在评论中提到的那样。

Answer 3

您应该能够通过尝试通过this.accounts 更改来访问该状态：

this.state.accounts

现在社区更流行使用所谓的函数式组件。通过这种方法，您不需要构造函数，真的建议您阅读此内容，因为它将大大简化您的代码！

Answer 4

首先，this.loadData = this.loadData.bind(this)是不必要的，因为loadData是一个箭头函数。

其次，setState它是一个异步函数，因此您无法在调用它后立即读取新状态。因此，以下控制台日志将是undefined

this.setState({accounts: res})
console.log(this.accounts) // also this must be this.state.accounts!

此外，您试图以错误的方式获取状态值，它必须是：

<DisplayAcc accounts={this.state.accounts} />

如果您想在DisplayAcc组件中读取帐户 prop，您应该将控制台日志添加到 或render方法componentDidUpate中，因为constructor仅在第一次渲染时调用，并且accounts当时您的 props 为空。但是我提到的那些每次道具改变时都会被调用。