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的父级重新渲染，从而导致重新渲染和{ {1}}重置。这就是state状态不变的原因！

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

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));
        }
    }

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

3 个答案: