点击按钮存储索引至state出现异常行为的排查求助

看起来你遇到的问题主要来自两个关键细节：变量名冲突和初始state的默认值设置，咱们一步步来修复：

1. 核心问题：嵌套map里的变量名覆盖了state的index #

你的displayData方法里，在嵌套的_init_.map循环中用了index作为参数名，这直接把外层从state解构出来的index给覆盖了！这就导致你访问data[index]时，用的根本不是你存在state里的按钮索引，而是内层循环的小索引，这肯定会出现索引错误。

2. 次要问题：初始state的index可能未设置默认值 #

如果你的state初始化时index是undefined或者null，点击第一个按钮（索引0）时，虽然setState确实把index改成了0，但因为上面的变量覆盖问题，displayData里的逻辑会出错，看起来就像索引没存入state一样。

修复后的代码 #

先修正displayData方法（重点改变量名） #

displayData() {
  const { data, index } = this.state
  // 先做个边界判断，避免初始时index无效导致报错
  if (index === undefined || !data[index]?.settings) return null
  
  let sortedData = data[index].settings.map((item, id) => {
    const { _init_ } = item.settings
    // 把内层map的参数index改成msgIndex，避免覆盖外层的state index
    return _init_.map((message, msgIndex) => {
      const { message_content } = message
      return message_content === undefined ? null : (
        <div key={msgIndex}>
          <div>
            <div className="settings-message">{message_content}</div>
          </div>
          <div>yes</div>
        </div>
      )
    })
  })
  return sortedData
}

检查state初始化，设置默认index #

确保你的组件state初始化时给index一个默认值，比如对应第一个按钮的0：

constructor(props) {
  super(props)
  this.state = {
    data: [], // 这里放你的原始数据
    index: 0 // 默认选中第一个按钮
  }
}

可选优化：用唯一id作为按钮的key #

虽然用idx作为key在静态数组里没问题，但如果你的数据后续有增删改，最好用每个item的唯一标识（比如items.id）作为key，避免React重渲染时出现意外问题：

displayButtons() {
  const { data } = this.state
  let sortedButtons = data.map((items, idx) => {
    // 优先用item的唯一id，没有的话再用idx
    return (
      <Button key={items.id || idx} className="project-btn" primary onClick={() => this.setState({ index: idx })} >
        {items.title}
      </Button>
    )
  })
  return sortedButtons
}

这样修改后，点击按钮时state里的index就能正确存储，displayData也能根据正确的索引渲染对应内容了。

内容的提问来源于stack exchange，提问作者Yerlan Yeszhanov