Блог

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

Все еще не определено. Пожалуйста, укажите на ошибку или, если у вас есть какие-либо предложения / рекомендации, я был бы очень признателен, потому что я очень новичок в этом. Спасибо!

Чтобы получить доступ к accounts состоянию, которое будет передано из компонента приложения в ваш компонент DisplayAcc:

 render() {return (
    <div className="container">
      <h1 className="title">Retail API</h1>
        <DisplayAcc accounts = {this.state.accounts} />
    </div>
  )}
  

Вы должны иметь возможность получить доступ к состоянию, если вы пытаетесь достичь его, this.accounts изменив его тоже:

 this.state.accounts
  

В настоящее время в сообществе более популярно использовать так называемые функциональные компоненты. При таком подходе вам не понадобится конструктор, очень рекомендую прочитать об этом, так как это немного упростит ваш код!

1. Я не вижу, где loadData вызывается, что вызывает у меня подозрения в отношении значения accounts .
2. Ключевым моментом является согласованность: если accounts является частью состояния компонента, то вы должны получить к нему доступ через this.state.accounts , а не this.accounts .
3. Пожалуйста, обратите внимание, что вы console.log осмысленно. Следовательно, если вы хотите проверить this.account , нет смысла печатать res , как вы упомянули в своем комментарии.

Прежде всего, 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 компоненте, вы должны добавить свой консольный журнал в render componentDidUpate методы или, потому constructor что вызывается только при первом рендеринге, а ваш accounts реквизит в это время пуст. Но те, о которых я упоминал, вызываются каждый раз при изменении реквизита.