значение реквизита указывается как неопределенное, но печатается на консоли браузера

Question

У меня странная проблема, я не уверен, что делаю неправильно. Я передаю объект flags этим компонентам, и он доступен, когда я регистрирую его на консоли, но он не входит в цикл наблюдения за журналированием. Object.keys (flags) не определено. Даже при попытке прямого доступа к значению объекта оно не определено.

class Home extends React.Component {

    render() {
        const allflags = [];
        console.log('in Home component flags.. ', this.props.flags);
        const {flags} = this.props;
        console.log('Object.keys ', Object.keys(flags));
        Object.keys(flags).forEach(key => {
            console.log('key => ', key);
            console.log('value => ', ''+ flags[key]);
            allflags.push(<div>{key} : {''+ flags[key]}</div>);
          });
         console.log('Home Props flags', flags);
          console.log('displayWallet >>>>>>>>> ', ''+flags['displayWallet']);
        return (
            <div>
                <h1> All flags</h1>
                {allflags}
            </div>
        );
    }
}


Actual Result:

App.js:8 in Home component flags..  {}displayLogonStatus:true  displayWallet: true  __proto__: Object
App.js:10 Object.keys  []length: 0__proto__: Array(0)
App.js:16 Home Props flags {}displayLogonStatus: false displayWallet: true __proto__: Object
App.js:17 displayWallet >>>>>>>>>  undefined


Expected Result:
App.js:10 Object.keys  []length: 0__proto__: Array(0)  - Shouldn't be empty

App.js:17 displayWallet >>>>>>>>>  undefined  - Should be undefined when it is printed just above.

Answer 1

Думаю, проблема в том, как вы передаете реквизиты компоненту.

Я могу предложить вам отладить

console.log(this.props);

и проверить, что происходит внутри.

Также я вставляю рабочий пример вашего кода.

class Home extends React.Component {
  render() {
    const { flags } = this.props;
    const allflags = [];

    Object.keys(flags).forEach(key => {
      allflags.push(<div>{key} : {''+ flags[key]}</div>);
    });

    return (
      <div>
        <h1>All flags</h1>
        {allflags}
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <Home flags={{ displayLogonStatus: true, displayWallet: true }} />
    );
  }
}

Надеюсь, это поможет вам