javascript - 运行 "setState"的 React 映射函数未更新组件

Question

我有一个应用程序组件，它采用一个嵌套组件。嵌套组件返回由其本地状态变量的长度之一确定的多个按钮。每个按钮都会运行一个编程 this.setState() 函数，以在单击时显示一组新数据。这是描述的代码，下面是我的问题:

class App extends React.Component {
  render() {
    return (
      <div className='container'>
        <Buttons />
      </div>
    )
  }
}

class Buttons extends React.Component {
  state = {
    variableState,
    count: 0,
    chosen: 0,
  }
  upOne = x => {
    this.setState(prevState => ({
      count: prevState.count + 1,
      chosen: x,
    }))
    console.log('running')
  }
  componentDidUpdate() {
    console.log('componentupdated')
  }
  render() {
    const {variableState, count, chosen} = this.state
    const {upOne} = this
    return (
      <div>
      {
        variableState[count].answers.map((s, t) => <button onClick={() => upOne(t + 1)}>{s}</button>)
      }
      </div>
    )
  }
}

const variableState = [
  {
    answers: [
      'one',
      'two',
      'three',
      'four',
    ]
  }
]

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

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

我想更新<Buttons />每次单击其中一个按钮时，计数都会加一。这应该运行 setState() ，它应该更新组件并运行 componentDidUpdate() 函数。问题是， upOne() 函数运行，但它没有更新组件，因此没有运行 componentDidUpdate() 函数，我不知道为什么。

如果我摆脱 Array.map() 逻辑并将其设置为如下所示的静态函数:

class Buttons extends React.Component {
    state = {
        variableState,
        count: 0,
        chosen: 0,
    }
    upOne = x => {
        this.setState(prevState => ({
            count: prevState.count + 1,
            chosen: x,
        }))
        console.log('running')
    }
    componentDidUpdate() {
        console.log('componentupdated')
    }
    render() {
        const {variableState, count, chosen} = this.state
        const {upOne} = this
        return (
            <button onClick={() => upOne(1)}>click</button>
        )
    }
}

它按照我的预期工作。

这是预期的行为还是我错过了什么？

Answer 1

variableState[count].answers...

一旦计数变为 1，variableState[1] 为 undefined 并且 undefined.answers 不存在并且您将在控制台中看到抛出的错误。

我不知道您在代码中显示的 variableStates 值是否与您最终使用的相同，但如果您将其更改为 variableState[ 0].answers...，它有效。