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状态中的新道具是否与已经存在的道具相等。只有这样，您才应该继续更改状态。这是一个示例：

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

正确地使用setState和redux状态的正确方法

1 个答案: