props值为undefined但在浏览器控制台上打印

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 }} />
    );
  }
}

我希望这可以帮助你