相关疑难解决方法(0)

我有一个父组件，它是一个包含 header 的平面列表HeaderComponent。这HeaderComponent是我创建的一个自定义组件，它包含 2 个自己的子组件。每当我刷新列表时，我都会将一个布尔值传递给HeaderComponent传递给它自己的孩子的as 道具，我这样做是为了检查每个组件是否需要获取新数据。问题是每当父组件刷新并设置新状态时，子组件的构造函数每次都会被调用。不应该只在父级第一次初始化时调用构造函数，然后所有进一步的调用都涉及调用子级的 shouldComponentUpdate 方法，以查看它是否需要更新。

父组件

_renderHeader = () => {
    return <HeaderComponent Items={this.state.Data} refresh={this.state.refresh}/>;
};

render() {
    console.log("TAG_RENDER render called " + this.state.refresh);
    return (
        <FlatList
            refreshing={this.state.refresh}
            onRefresh={() => {
                console.log("onRefresh");
                this.setState({
                    refresh: true
                }, () => {
                    this._fetchData();
                });
            }}
            ......


            ListHeaderComponent={() => this._renderHeader()}
            .......
        />
    );
}

标题组件

export default class HeaderComponent extends React.Component {

    constructor(props) {
        super(props);
        console.debug("HeaderComponent");
    }

    render() {
        return (
            <MainHeader Items={this.props.Items}/>
            <SubHeader refresh={this.props.refresh}/> …

我的react组件的构造函数被调用了两次，但我不知道为什么。我正在使用react-redux来存储我的应用程序的语言。我有一个功能可根据浏览器的语言设置默认语言。LoginPage是第一个获得渲染的组件，因此我在其构造函数中调用了我的函数。基本上，它所做的是比较并调度一个动作。当我使用redux开发人员工具检查状态时，我看到它被调度了两次。我在构造函数中打印了伪数据，它也被打印了两次。

LoginPage.js

import React from 'react';
import {connect} from 'react-redux';
import {startLogin} from '../actions/auth';
import {setLanguage} from '../actions/lang';

export class LoginPage extends React.Component{

  constructor(props){
    super(props);
    this.setDefaultLanguage();
    console.log('i am constructor');
  }

  changeLanguage = (e) => {
    const lan = e.target.value;
    this.props.setLanguage(lan);
  };

  setDefaultLanguage = () => {
    const defaultLanguage = navigator.language || navigator.userLanguage || 'en-US';

    if(defaultLanguage == 'es'){
      this.props.setLanguage(defaultLanguage);
    }else{
      this.props.setLanguage('en');
    }
  }

  render(){
    return(
      <div className="box-layout">
        <div className="box-layout__box">
          <h1 className="box-layout__title">Expensify</h1>
          <p>It\'s time to get your expenses under control.</p> …