使用下拉 reactstrap 更改状态

Question

我正在使用 reactstrap 创建一个下拉列表，我想在dropDownValueNav选择下拉列表的不同项目时更改 的值。问题出在我的onClick函数内部。在那里我设置了我的新值的状态，但它不会立即改变；它只在第二次点击时这样做。我怎样才能解决这个问题？这是我的代码：import React, { PureComponent } from 'react';import {  Row,  Card,  Nav,  Navbar,  NavItem,  UncontrolledDropdown,  DropdownToggle,  DropdownItem,  DropdownMenu,} from 'reactstrap';import { withTranslation } from 'react-i18next';import PropTypes from 'prop-types';import DownIcon from 'mdi-react/ChevronDownIcon';import {  Link,  NavLink,} from 'react-router-dom';class Menu extends PureComponent {  static propTypes = {    t: PropTypes.func.isRequired,  };  constructor(props) {    super(props);    this.state = {      dropDownValueNav: 'Home,      dropdownOpen: false,    };  }  toggle = () => {    const { dropdownOpen } = this.state;    this.setState({      dropdownOpen: !dropdownOpen,    });    console.log(this.state.dropdownOpen)  };  changeValueSecondary = (e) => {    this.setState({ dropDownValueNav: e.currentTarget.textContent });    console.log(e.currentTarget.textContent);    console.log('state', this.state.dropDownValueNav);  };  render() {    const { t } = this.props;    const { dropdownOpen, dropDownValueNav } = this.state;    return (      <Card inverse>        <Row>          <div className="col-auto">            <Navbar>              <Nav className="text_lg" navbar>                <UncontrolledDropdown toggle={this.toggle} isOpen={dropdownOpen}>                  <DropdownToggle nav>                    {dropDownValueNav}                  </DropdownToggle>                  <DropdownMenu>                    <DropdownItem onClick={this.changeValueSecondary}>                      <Link to="/react">react</Link>                    </DropdownItem>                    <DropdownItem onClick={this.changeValueSecondary}>                      <Link to="/html">html</Link>                    </DropdownItem>           

Answer 1

setState() 并不总是立即更新组件。它可能会批量更新或推迟更新。这使得在调用 setState() 后立即读取 this.state 成为一个潜在的陷阱。相反，使用 componentDidUpdate 或 setState 回调 (setState(updater, callback))。

这样做以查看控制台更新状态：

toggle = () => {

    const { dropdownOpen } = this.state;

    this.setState({

      dropdownOpen: !dropdownOpen,

    }, () => console.log(this.state.dropdownOpen))

};

changeValueSecondary = (e) => {

    this.setState(

       { dropDownValueNav: e.currentTarget.textContent },

       () => console.log('state', this.state.dropDownValueNav)

    );

    console.log(e.currentTarget.textContent);

};

Answer 2

setState() 异步工作，因此出于性能目的，它将对状态的更新一起批处理。更多细节

为了克服这种竞争条件，有几种方法可以编写它。

1. 您可以使用回调函数，您可以在其中调用 console.log() ，它将显示更新的选项。

2. 您可以尝试使用 prevState 作为 setState() 的参数，并可以使用它来更新状态。

3. 您还可以编写更新程序函数，您可以在回调中调用这些函数来更新状态。

所有选项的示例。

toggle = () => {

    this.setState({

      this.state.dropdownOpen: !this.state.dropdownOpen}, 

        () => console.log(this.state.dropdownOpen)

    )

};

changeValueSecondary = (e) => {

    this.setState({ 

        this.state.dropDownValueNav: e.currentTarget.textContent},

            () => console.log(this.state.dropDownValueNav)

    );

};

或者

toggle = () => {

this.setState((prevState) => ({

    dropdownOpen: !prevState.dropdownOpen

    }));

};

changeValueSecondary = (e) => {

    this.setState({ 

        this.state.dropDownValueNav: e.currentTarget.textContent},

            () => doSomeThingWithTheUpdatedState();

    );

};

doSomeThingWithTheUpdatedState = () => {

    //Use the new value of the state.dropDownValueNav

}

同样对于高级应用程序，您可以使用要调用的减速器，它最终会在您使用它们之前更新状态。