使用下拉 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 = () => {&nbsp; &nbsp; const { dropdownOpen } = this.state;&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; dropdownOpen: !dropdownOpen,&nbsp; &nbsp; }, () => console.log(this.state.dropdownOpen))};changeValueSecondary = (e) => {&nbsp; &nbsp; this.setState(&nbsp; &nbsp; &nbsp; &nbsp;{ dropDownValueNav: e.currentTarget.textContent },&nbsp; &nbsp; &nbsp; &nbsp;() => console.log('state', this.state.dropDownValueNav)&nbsp; &nbsp; );&nbsp; &nbsp; console.log(e.currentTarget.textContent);};

Answer 2

setState() 异步工作，因此出于性能目的，它将对状态的更新一起批处理。更多细节为了克服这种竞争条件，有几种方法可以编写它。您可以使用回调函数，您可以在其中调用 console.log() ，它将显示更新的选项。您可以尝试使用 prevState 作为 setState() 的参数，并可以使用它来更新状态。您还可以编写更新程序函数，您可以在回调中调用这些函数来更新状态。所有选项的示例。toggle = () => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; this.state.dropdownOpen: !this.state.dropdownOpen},&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; () => console.log(this.state.dropdownOpen)&nbsp; &nbsp; )};changeValueSecondary = (e) => {&nbsp; &nbsp; this.setState({&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; this.state.dropDownValueNav: e.currentTarget.textContent},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; () => console.log(this.state.dropDownValueNav)&nbsp; &nbsp; );};或者toggle = () => {this.setState((prevState) => ({&nbsp; &nbsp; dropdownOpen: !prevState.dropdownOpen&nbsp; &nbsp; }));};changeValueSecondary = (e) => {&nbsp; &nbsp; this.setState({&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; this.state.dropDownValueNav: e.currentTarget.textContent},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; () => doSomeThingWithTheUpdatedState();&nbsp; &nbsp; );};doSomeThingWithTheUpdatedState = () => {&nbsp; &nbsp; //Use the new value of the state.dropDownValueNav}同样对于高级应用程序，您可以使用要调用的减速器，它最终会在您使用它们之前更新状态。