ReactJs：尽管事件已被正确触发，但 DropDown 事件值仍设置为空字符串

Question

OperationSavDetails.js

class OperationSavDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      statusUpdateDropDownOpen: false,
      statusUpdateDropDownValue: "Mettre à jour le status de l'opération SAV"
    };

    this.changeStatusUpdateDropDownValue = this.changeStatusUpdateDropDownValue.bind(
      this
    );
    this.toggleStatusUpdateDropDown = this.toggleStatusUpdateDropDown.bind(
      this
    );
  }

  changeStatusUpdateDropDownValue(e) {

    console.log("e.currentTarget.textContent");
    console.log(e.currentTarget.textContent);
    this.setState({
      statusUpdateDropDownValue: e.currentTarget.textContent
    });

  }
  toggleStatusUpdateDropDown() {
    this.setState({
      statusUpdateDropDownOpen: !this.state.statusUpdateDropDownOpen
    });
  }
  render() {
    const { isAuthenticated, user } = this.props.auth;
    const DefaultDropDownValues = (
      <Row className="align-items-center">
        <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
          <Dropdown
            isOpen={this.state.statusUpdateDropDownOpen}
            toggle={() => {
              this.toggleStatusUpdateDropDown();
            }}
          >
            <DropdownToggle className="my-dropdown" caret>
              {this.state.statusUpdateDropDownValue}
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem>
                {" "}
                <div
                  value="repare"
                  onClick={this.changeStatusUpdateDropDownValue}
                >
                  Default DropDown
                </div>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>{" "}
        </Col>
      </Row>
    );
    const operateurSavDropDownValues = (
      <Row className="align-items-center">
        <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
          <Dropdown
            isOpen={this.state.statusUpdateDropDownOpen}
            toggle={() => {
              this.toggleStatusUpdateDropDown();
            }}
          >
            <DropdownToggle className="my-dropdown" caret>
              {this.state.statusUpdateDropDownValue}
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem>
                {" "}
                <div
                  value="repare"
                  onClick={this.changeStatusUpdateDropDownValue}
                >
                  Réparé
                </div>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>{" "}
        </Col>
      </Row>
    );

    return (
      <div className="animated fadeIn">
        {user.role === "operateur_sav"
          ? operateurSavDropDownValues
          : DefaultDropDownValues}
      </div>
    );
  }
}

它呈现这个 下拉按钮:
根据 user.role，它将呈现不同的 下拉值 。
当用户单击 下拉值 时，它会使用以下函数在状态值 statusUpdateDropDownValue 中更新：

changeStatusUpdateDropDownValue(e) {
    console.log("e.currentTarget.textContent");
    console.log(e.currentTarget.textContent);
    // Logs this: Réparé
    this.setState({
      statusUpdateDropDownValue: e.currentTarget.textContent
    });
  }

日志结果是正确的。但是*，statusUpdateDropDownValue（未单击下拉按钮时显示在下拉按钮上的值）被指定为 null 或 空字符串:

我得到这个错误：

index.js:1 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `currentTarget` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/docs/events.html#event-pooling for more information.

我已按照错误中提供的 link 进行操作，但我仍然无法理解 为什么尽管已正确记录所选的下拉值，但它没有在正确表述

Answer 1

发生这种情况的原因可能是您在 setState 中使用了事件值，这是一个异步操作。 JavaScript 默认情况下会在函数执行完成时使事件及其所有属性无效。尝试将您需要的值保存在变量中，然后将其传递给 setState 函数，而不是尝试访问事件（因为它已经被 JavaScript 取消）。

ReactJs：尽管事件已被正确触发，但 DropDown 事件值仍设置为空字符串

ReactJs : DropDown Event Value gets set to empty string despite the event having been triggered correctly

javascript

asynchronous

event-handling

reactjs

react-state-management