在点击状态下存储索引，行为异常

Question

我正在映射一个数组，并将其显示为按钮。当用户单击按钮时，我将存储索引并根据该索引显示数据。但是有一些奇怪的行为。当我单击第一个按钮时，它不会以状态存储索引。仅在单击其他按钮后，它才开始保存，但索引错误。可能是什么问题呢？

displayButtons() {
    const { data } = this.state
    let sortedButtons = data.map((items, idx) => {
      return (
        <Button
          key={idx}
          className="project-btn"
          primary
          onClick={() => this.setState({ index: idx })}
        >
          {items.title}
        </Button>
      )
    })
    return sortedButtons
  }

displayData() {
    const { data, index } = this.state
    let sortedData = data[index].settings.map((item, id) => {
      const { _init_ } = item.settings
      return _init_.map((message, index) => {
        const { message_content } = message

        return message_content === undefined ? null : (
          <div key={index}>
            <div>
              <div className="settings-message">{message_content}</div>
            </div>
            <div>yes</div>
          </div>
        )
      })
    })
    return sortedData
  }