首頁猿問如何將狀態(tài)作為道具傳遞？（未定義的錯(cuò)誤）

如何將狀態(tài)作為道具傳遞？（未定義的錯(cuò)誤）

JavaScript

函數(shù)式編程 2023-07-14 15:12:22

應(yīng)用程序.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 上，我的構(gòu)造函數(shù)中有一個(gè) console.log(this.props.accounts) 。輸出未定義。我應(yīng)該怎么辦？我嘗試添加這些行：componentDidMount(){ this.loadData = this.loadData.bind(this) }仍然未定義。請指出錯(cuò)誤，或者如果您有任何建議/最佳實(shí)踐，我將非常感激，因?yàn)槲覍Υ撕苣吧?。謝謝！

查看完整描述

4 回答

哆啦的時(shí)光機(jī)

TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊

為了訪問accounts從 App 組件傳遞到 DisplayAcc 組件的狀態(tài)：

render() {return (

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

</div>

)}

反對回復(fù) 2023-07-14

紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊

我沒有看到在哪里loadData被調(diào)用，這讓我對的價(jià)值產(chǎn)生懷疑accounts。
一致性是關(guān)鍵：如果accounts是組件狀態(tài)的一部分，那么您應(yīng)該通過訪問它this.state.accounts，而不是this.accounts。
請注意，你是console.log有意義的。因此，如果您想檢查this.account，就沒有點(diǎn)打印res，正如您在評論中提到的那樣。

反對回復(fù) 2023-07-14

千萬里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊

您應(yīng)該能夠通過嘗試通過this.accounts 更改來訪問該狀態(tài)：

this.state.accounts

現(xiàn)在社區(qū)更流行使用所謂的函數(shù)式組件。通過這種方法，您不需要構(gòu)造函數(shù)，真的建議您閱讀此內(nèi)容，因?yàn)樗鼘⒋蟠蠛喕拇a！

反對回復(fù) 2023-07-14

慕的地10843

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超8個(gè)贊

首先，this.loadData = this.loadData.bind(this)是不必要的，因?yàn)?code>loadData是一個(gè)箭頭函數(shù)。

其次，setState它是一個(gè)異步函數(shù)，因此您無法在調(diào)用它后立即讀取新狀態(tài)。因此，以下控制臺日志將是undefined

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

此外，您試圖以錯(cuò)誤的方式獲取狀態(tài)值，它必須是：

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

如果您想在DisplayAcc組件中讀取帳戶 prop，您應(yīng)該將控制臺日志添加到或render方法componentDidUpate中，因?yàn)?code>constructor僅在第一次渲染時(shí)調(diào)用，并且accounts當(dāng)時(shí)您的 props 為空。但是我提到的那些每次道具改變時(shí)都會被調(diào)用。

反對回復(fù) 2023-07-14