Render вызывается при изменении состояния, реквизиты должны обновляться для потомка, но потомок не перерисовывается - PullRequest
0 голосов
/ 26 мая 2018

У меня есть следующий код:

// Packages
import React, { Component } from 'react';
import Web3 from 'web3';
import Header from './components/Header';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      account: null,
      contract: null,
    }

  }

  componentDidMount = () => {
    if (typeof window.web3 !== 'undefined') {
        this.state.web3.eth.getAccounts((err, accounts) => {
          if(err)
              throw err;
          } else {
            this.state.web3.eth.defaultAccount = accounts[0];
            this.contract = new this.state.web3.eth.Contract(abi.abi, this.contractAddress);
            this.setState({
              account : accounts[0],
              contract : this.contract
            });

          }
      });
    } else {
        console.log('No web3? You should consider trying MetaMask!')
    }
  }

  render() {
    console.log(this.state);
    return (

      <div className="App">
        <Header
          account = {this.state.account}
          web3={this.state.web3}
          contract={this.state.contract}
        />          </div>
    );
  }
}

export default App;

Я хочу, чтобы компонент Header повторно отображался, если setState завершен, и функция рендеринга вызывается с обновленным состоянием после функции setState в componentDidMount.

Если я вхожу в свой компонент Header, он вызывается только один раз, а реквизиты не обновляются ..

...
    class Header extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          accountBalance: "-",
          formattedAddress: '0x0...000',
          account: '0x0'
        }

      }

      componentDidMount(){
        console.log('rendered');
      }
...

Я абсолютно не понимаю, что может быть не так ..

1 Ответ

0 голосов
/ 26 мая 2018

В вашем случае componentWillReceiveProps () является подходящим методом жизненного цикла для работы с обновленными значениями проп.Вы можете прочитать об этом здесь: https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1

...