javascript - 有条件地使用 setState 和 redux 状态的正确方法

Question

我有一个关于在组件中使用 setState 和 redux 状态的最佳实践是什么的问题

例如:我有一个带有 onClick 事件的组件。

在组件 A 的 onClick 事件中，我调度了一些 redux 操作，该操作将从 reducer 更改 redux 状态:

someOnClickFunc = () => {
   this.props.someReduxAction()
}

我有一个组件b:

import React, { Component } from 'react'
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

class ComponentB extends Component {
    constructor(props) {
        super(props);
        this.state = {
          someValue: false,
        };
      }
    render() {
        return (
            <div>
                {someValue}
            </div>
        )
    }
}

const mapStateToProps = state => ({
    someReduxState: state.someReduxState
  });

  export default connect(
    mapStateToProps,
  )(ComponentB);

我的组件 B 收到了 redux 状态，我想用这个 redux 状态更改组件自身状态。

我可以在渲染后这样做。

if (this.props.someReduxState.someVal == true) {
  this.state.someValue = true
}

但我不想使用 this.state...我更喜欢这样使用 this.setState:

  if (this.props.someReduxState.someVal == true) {
      this.setState({
        someValue: true
      })
    }

哪里是做到这一点的最佳地点。

当我在 render() 或 componentDidUpdate 之后执行此操作时，我收到此错误:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

我相信最好的方法是使用 componentDidUpdate 方法。但有一个问题，你需要检查 redux 状态中的新 props 是否等于已经存在的 props。只有这样，你才应该继续改变你的状态。这是一个例子:

componentDidUpdate(prevProps, prevState) {
    if(prevProps.somedata.data !== this.props.somedata.data) {
              this.setState({                  //update the state after checking
                 someProperty: value
               }); 
     }
}