Всегда вызывать компонент обновления на конструкции? - PullRequest
Новая
       8

Всегда вызывать компонент обновления на конструкции?

0 голосов
/ 19 октября 2018

Я обнаружил, что пишу код, который выглядит следующим образом: 

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

Где мой компонент имеет два элемента, связанных с состоянием избыточности - foo и bar.Но моему компоненту сначала нужно foo, так как при определенных условиях foo я могу перенаправить в другое место (т. Е. Если они уже заполнили форму).

Но я не знаю, существует ли какой-либо элемент в состоянии избыточности или нет.

Поэтому я проверяю наличие и состояние foo в construct и componentDidUpdate,Это делает для дублированного кода, и делает его более трудным для тестирования.

Является ли простой способ заставить конструктор просто выполнить функциональность componentDidUpdate?Просто позвоните this.componentDidUpdate({}) в конструкторе?

Или иначе другой аккуратный способ сделать это?

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

Нет причин, по которым функциональный компонент без сохранения состояния здесь не будет работать.

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 для представления некоторых.

0 голосов
/ 19 октября 2018

Извлеките его в другую функцию и вызовите эту функцию из constructor и componentDidUpdate

...