Javascript 处于React状态的数组赢得'；t图

我在州里有这样的设置：

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

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

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

---

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

我已经尝试了你的代码并为我工作：

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>
  }
}

类CustomInput扩展React.Component{
构造函数（）{
超级（）；
此.state={
伊斯洛格丁：错，
登录：错误，
用户：null，
节目：['酷'，'男'，'好']
}
}
render（）{
返回
{this.state.programs.map（程序=>
{程序}
)}
}
}

---

我已经尝试了您的代码并为我工作：

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>
  }
}

类CustomInput扩展React.Component{
构造函数（）{
超级（）；
此.state={
伊斯洛格丁：错，
登录：错误，
用户：null，
节目：['酷'，'男'，'好']
}
}
render（）{
返回
{this.state.programs.map（程序=>
{程序}
)}
}
}

---

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

这是我的建议

工作守则-

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'))

类Foo扩展了React.Component{
构造函数（）{
超级（）；
此.state={
伊斯洛格丁：错，
登录：错误，
用户：null，
节目：['酷'，'男'，'好']
}
}
render（）{
const items=this.state.programs.map（程序=>
{程序}
)
返回(
{items}
)
}
}
ReactDOM.render（，document.getElementById（'app'））

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

这是我的建议

工作守则-

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'))

类Foo扩展了React.Component{
构造函数（）{
超级（）；
此.state={
伊斯洛格丁：错，
登录：错误，
用户：null，
节目：['酷'，'男'，'好']
}
}
render（）{
const items=this.state.programs.map（程序=>
{程序}
)
返回(
{items}
)
}
}
ReactDOM.render（，document.getElementById（'app'））

该状态正在用另一个函数中的api调用覆盖模拟程序

该状态正在用另一个函数中的api调用覆盖模拟程序

它似乎是正确的，但根本无法为我呈现。然后我还尝试将其作为道具传递到组件中，它将传递空白。奇怪，你看到stackblitz链接了吗？我想知道你那边怎么了。您可以共享更多代码/设置吗？可以。当我在渲染中有代码时，我看到它闪烁了一秒钟而没有消失。没有错误，只是对key.Huh发出控制台警告，注释掉了以下代码：

componentDidMount（）{if（localStorage.getItem（'accountData'）！=null）{this.authenticateToken（localStorage.getItem（'accountData'）；}}}

并显示。当我把它加回去的时候，它就不会变了。我是个白痴。authenticate-token函数重置状态它似乎是正确的，但不会为我呈现。然后我还尝试将其作为道具传递到组件中，它将传递空白。奇怪，你看到stackblitz链接了吗？我想知道你那边怎么了。您可以共享更多代码/设置吗？可以。当我在渲染中有代码时，我看到它闪烁了一秒钟而没有消失。没有错误，只是对key.Huh发出控制台警告，注释掉了以下代码：

componentDidMount（）{if（localStorage.getItem（'accountData'）！=null）{this.authenticateToken（localStorage.getItem（'accountData'）；}}}

并显示。当我把它加回去的时候，它就不会变了。我是个白痴。authenticate token函数重置状态