为什么即使在回调中我的状态也不更新？

Question

我调用一个函数来使用 onClick 更改我的状态，一个状态位于父组件中（我使用传入 props 的函数更改它）和另一个状态位于我的组件中。 第一个工作正常， 但是第二个没有更新，即使我测试它并在回调中调用结果。

我在 setState 之前的函数和回调中放置了一些控制台日志，它记录但不改变保持不变的状态

class CaseProducts extends Component {
  state = {
    position_selector: 0,
    case_sales: "-100%",
    case_products: "0%",
  };

  changeSelector = () => {
    console.log(this.props);
    if (!this.props.products_on) {
      console.log("product: off");
      this.setState(
        { position_selector: -106, case_sales: 0, case_products: "-100%" },
        () => console.log(this.state.position_selector),
      );
    } else {
      console.log("product_on");
      this.setState(
        { position_selector: 0, case_sales: "-100%", case_products: "0%" },
        () => console.log(this.state.position_selector),
      );
    }
  };
  render() {
    return (
      <div className="button-category">
        <div
          className="blue-button"
          style={{ right: this.state.position_selector }}
        >
          <text className="position-selector-products">Produits</text>
          <text className="position-selector-sales">Ventes</text>
        </div>
        <button
          className="change-button-sales"
          onClick={() => {
            this.props.updateDatas();
            this.changeSelector();
          }}
        >
          Ventes
        </button>
        <button
          className="change-button-products"
          onClick={() => {
            this.props.updateDatas();
            this.changeSelector();
          }}
        >
          Produits
        </button>
      </div>
    );
  }
}

class App extends Component {
  state = { products_on: true };

  updateDatas = () => {
    console.log("bonjourrrrr");
    this.setState({ products_on: !this.state.products_on });
  };

  render() {
    return (
      <Router>
        <Route
          exact
          path={ROUTES.HOME}
          component={props => (
            <CaseProducts
              {...props}
              products_on={this.state.products_on}
              updateDatas={this.updateDatas}
            />
          )}
        />
      </Router>
    );
  }
}

product_on 的 setState 工作正常，只是 change_selector、case_sales 和 product_sales 的 setState 根本不更新。

有人知道它可能是什么吗？

Answer 1

可能发生的情况是，您正在根据传递的属性创建一个新的内部状态。就像您不知道哪个“将首先结束”。

如果你想根据传递的属性更新内部状态，你应该改用getDerivedStateFromProps 方法（在以前版本的 React 中，可能是componentWillReceiveProps 方法）

class CaseProducts extends React.Component {
  state = {
    position_selector: 0,
    case_sales: '-100%',
    case_products: '0%'
  };

  static getDerivedStateFromProps(nextProps) {
    if (!nextProps.products_on) {
      return ({
        position_selector: -106,
        case_sales: 0,
        case_products: '-100%'
      });
    } else {
      return ({
        position_selector: 0,
        case_sales: '-100%',
        case_products: '0%'
      });
    }
  }

  render() {

    return ( <
      div className = 'button-category' >
      <
      div className = 'blue-button'
      style = {
        {
          right: this.state.position_selector
        }
      } >
      <
      text className = 'position-selector-products' > Produits < /text> <
      text className = 'position-selector-sales' > Ventes < /text> <
      /div> <
      button className = 'change-button-sales'
      onClick = {
        () => {
          this.props.updateDatas()
        }
      } >
      Ventes <
      /button> <
      button className = 'change-button-products'
      onClick = {
        () => {
          this.props.updateDatas()
        }
      } >
      Produits <
      /button> <
      /div>  
    )
  }
}


class App extends React.Component {

  state = {
    products_on: true
  }

  updateDatas = () => {
    console.log('bonjourrrrr');
    this.setState({
      products_on: !this.state.products_on
    })
  }

  render() {
    return ( <
      CaseProducts products_on = {
        this.state.products_on
      }
      updateDatas = {
        this.updateDatas
      }
      />
    );
  }
}

ReactDOM.render( < App / > , document.getElementById('app'));

<div id="app" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

问题是，当您调用 this.props.updateDatas(); 时，此方法会导致父级中的状态更改，这将导致包含子级 CaseProducts 的父级重新渲染，从而导致重新渲染和 state 重置。这就是为什么CaseProducts 状态没有改变！

尝试删除 this.props.updateDatas() 并检查 CaseProducts 组件中的状态变化。

Answer 3

可能子组件中的函数changeSelector中的this.setState错误，您必须按照以下方式进行更改。

changeSelector = () => {
        console.log(this.props);
        if (!this.props.products_on) {
            console.log('product: off');
            this.setState({ position_selector: -106, case_sales: 0, case_products: '-100%' }); 
            console.log(this.state.position_selector);
        } else {
            console.log('product_on');
            this.setState({ position_selector: 0, case_sales: '-100%', case_products: '0%' });
            console.log(this.state.position_selector));
        }
    }