javascript - React 状态下的数组不会映射

Question

我有这样的设置状态:

constructor() {
  super();
  this.state = {
    isLoggedIn: false,
    loginShowing: false,
    user: null,
    programs: ['cool','guy','nice']
  }
}

...但是当我尝试在渲染中执行此操作时

{this.state.programs.map(program =>
  <h1>{program}</h1>
)}

页面上没有显示任何内容。如果我输入 asdf: '123'状态，然后打印 <h1> {this.state.asdf} </h1> ，它确实有效。有谁知道为什么状态中的数组映射不渲染？谢谢。

我在 macOS Sierra 10.12.6 上运行 React，并使用 React ^15.6.1。

编辑:看来这是导致它的代码:

  componentDidMount() {
    if(localStorage.getItem('accountData') != null) {
      this.authenticateToken(localStorage.getItem('accountData'));
    }
  }

我不知道这会如何影响渲染，但确实如此。

Answer 1

我已经尝试过你的代码并为我工作:

class CustomInput extends React.Component {
  constructor() {
  super();
  this.state = {
    isLoggedIn: false,
    loginShowing: false,
    user: null,
    programs: ['cool','guy','nice']
  }
}

  render() {
     return <div>
     {this.state.programs.map(program =>
        <h1>{program}</h1>
      )}
    </div>
  }
}

https://stackblitz.com/edit/react-jmfafj