ReactJS（帶 coreui）：下拉組件沒有反映正確的菜單點擊

Question

我試圖用 ReactJS 和 coreui 組件構建一個前端。 這是我嘗試實現“下拉​​”菜單的代碼：

class DropdownTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  handleClick(i) {
    this.setState({ value: i });
    console.log("clicked " + i + ", this.state.value = " + this.state.value);
  }

  renderItem(value) {
    return (
      <CDropdownItem key={value} onClick={() => this.handleClick(value)}>
        {value}
      </CDropdownItem>
    );
  }

  render() {
    return (
      <CDropdown id="axes-dd" className="float-right mr-0" size="sm">
        <CDropdownToggle id="axes-ddt" color="secondary" size="sm">
          Axes
        </CDropdownToggle>
        <CDropdownMenu>
          {this.renderItem(0)}
          {this.renderItem(1)}
          {this.renderItem(2)}
        </CDropdownMenu>
      </CDropdown>
    );
  }
}

這是前端組件：

當我想要保留一個變量（假設state.value ）時，它將跟蹤我單擊的菜單項。 但是當我運行上面的例子時，我看到上面的代碼沒有正確跟蹤點擊順序。 在控制台上，我得到這些輸出——

例如，當我第一次單擊菜單0時，控制台輸出被clicked 0, this.state.value = null ，雖然我是在更新狀態后打印的（請參閱handleClick(i)函數）。 同樣，當我單擊菜單1 ，控制台輸出被clicked 1, this.state.value = 0等等。 你明白我的意思。

我該如何解決？

注意： CDropdown 、 CDropdownMenu 、 CDropdownToggle 、 CDropdownItem組件來自coreui庫。

Answer 1

setState() 可以異步設置狀態。 因此，如果您想確保使用更新的狀態，您應該給它（setState 方法）一個回調以在狀態更新后運行。

handleClick(i) {
    this.setState({ value: i }, () => {
       console.log("clicked " + i + ", state.value = " + this.state.value);
    });
}

有關更多信息，請查看：=> https://reactjs.org/docs/react-component.html#setstate