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的反应，反应^ 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

Answer 2

取决于您的设置。如果您在codepen上运行此代码，则需要安装Babel。检查浏览器控制台是否有任何错误。

这里是demo。

工作代码 -

class Foo extends React.Component {
  constructor() {
  super();
  this.state = {
    isLoggedIn: false,
    loginShowing: false,
    user: null,
    programs: ['cool','guy','nice']
  }
}
  render() {
    const items = this.state.programs.map(program =>
     <h1>{program}</h1>
    )
    return (
      <div>{items}</div>
    )
  }
}

ReactDOM.render(<Foo/>, document.getElementById('app'))

Answer 3

状态是用另一个函数中的api调用覆盖了模拟程序。

处于React状态的数组将不会映射

3 个答案: