Question

我一直发现自己正在编写如下代码：

class MyComponent extends Component {

   constructor(props) {
       super(props); 

       const {foo, bar, fetchFoo, fetchBar} = props; 

       if (!foo) {
         fetchFoo(); 
       }

       if (foo && foo.someCondition) {
         fetchBar(); 
       }
   }


   componentDidUpdate(prevProps) {
      if(prevProps.foo != this.props.foo && this.pros.foo.someCondition) {
         this.props.fetchBar(); 
      }
   }

}


const mapStateToProps = (
  state,
) => {
  return {
    foo: state.foo, 
    bar: state.bar
  };
};

const mapDispatchToProps = dispatch => {
  return {
    fetchFoo: () => dispatch(fetchFoo()), 
    fetchBar: () => dispatch(fetchBar()), 
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

在我的组件中有两个从redux状态绑定的项目-foo和bar。但是我的组件首先需要foo，因为在foo的某些情况下，我可能会重定向到另一个地方（即，如果他们已经完成了表单）。

但是我不知道任何一个项目是否都处于redux状态。

因此，我测试了foo和construct上componentDidUpdate的存在和条件。这使得代码重复，并使测试更加困难。

是使构造函数仅执行componentDidUpdate功能的整洁方法吗？只需在构造函数中调用this.componentDidUpdate({})？

还是另外一种整洁的方式呢？

Answer 1

将其提取到另一个函数中，然后从constructor和componentDidUpdate调用该函数

Answer 2

没有理由说无状态功能组件在这里不起作用。

const MyComponent = ({foo, bar, fetchFoo, fetchBar}) => {
       if (!foo) {
         fetchFoo(); 
       }

       if (foo && foo.someCondition) {
         fetchBar(); 
       }

       return (<Fragment> {JSON.stringify(foo) + JSON.stingify(bar)}</Fragment>); 
};

现在-如果您特别需要某种状态-那么您可以使用React Hooks来引入一些状态。

始终调用组件是否在构造上进行了更新？

2 个答案: