重新渲染后文字不会出现

Question

在下面的代码我运行组件将接收道具，以确保我在员工状态下传递它。在确保员工不再为空之后，我想显示其信息，但它不会显示。我console.logged“做了”，看看它是否会在员工完全加载并在状态下传递时记录，并且日志显示正常。那么为什么我的文本不会在console.log实际运行时出现？（数据是从firebase获取的，这就是为什么我使用组件会收到道具）

import React from 'react';
import { Text, TouchableWithoutFeedback, LayoutAnimation, NativeModules, View, } from 'react-native';
import { CardSection } from './common/index';
import { connect } from 'react-redux';
import { onPress } from '../actions/index';
const { UIManager } = NativeModules

UIManager.setLayoutAnimationEnabledExperimental && 
UIManager.setLayoutAnimationEnabledExperimental(true)

class FlatListItem extends React.Component {
  state = {
    show:false,
    employee:null
  }

  componentWillReceiveProps (nextProps) {
    this.setState({employee:nextProps.employee})
  }

  renderDescription() {
    if (this.state.show)
      return (
        <View style={{ flex: 1 }}>
          <Text>Merge</Text>
        </View>
      )
  }

  renderHour () {
    let hour=this.props.class.hour;
    let minutes='';

    if (this.props.class.minutes < 10) { 
      minutes = `0${this.props.class.minutes}`;
    } else {
      minutes = this.props.class.minutes;
    }

    return (
      <Text style={styles.titleStyle}>
        {hour}:{minutes}-{this.props.class.employeeUid}
      </Text>
    )
  }

  render() {
    LayoutAnimation.spring()
    console.log(this.state.employee);

    return (
      <TouchableWithoutFeedback 
        onPress={()=>{this.setState({show:!this.state.show})}}
      >
        <View>
          <CardSection>
            { console.log('rendered!!!!!') }
            { this.state.employee !==null ? <Text>123</Text> : null }
          </CardSection>
          { this.renderDescription() }
        </View>
      </TouchableWithoutFeedback>
    );
  }
} 

const styles = {
  titleStyle: {
    fontSize: 18,
    paddingLeft: 15,
  }
}

export default FlatListItem;

我将道具传递给FLatList Item的方式：

<ListView
                    enableEmptySections
                    dataSource={this.props.dataSource}
                    renderRow={(classi) => {
                        if (this.state.employees) {
                            const date = new Date();
                            const year = date.getFullYear();
                            const month = date.getMonth() + 1;
                            const day = date.getDate();
                            let wantedEmployee = null;
                            if (this.state.employees !== null) {
                                this.state.employees.forEach(employee => {
                                    if (employee.uid === classi.employeeUid)
                                        wantedEmployee = employee;
                                });
                                if (classi.year === year && classi.month === month && day === classi.day)
                                    return <FlatListItem class={classi} employee={wantedEmployee} />;
                                else
                                    return null;
                            }
                            else
                                return null;
                        }
                    }

                    }

this.state.employees是从firebase中获取的，所以这就是我验证id状态为null的原因。如果我输入console.log（'did it !!'）而不是123，则来自FlatItemList的console.logs是：

23:22:35: null
23:22:35: rendered!!!!!
23:22:35: Object {
23:22:35:   "cnp": "3",
23:22:35:   "name": "3",
23:22:35:   "phone": "3",
23:22:35:   "registru": "3",
23:22:35:   "serie": "3",
23:22:35:   "shift": "Luni",
23:22:35:   "uid": "-LLugVdZk3wJ1LbgDuEU",
23:22:35: }
23:22:35: rendered!!!!!
23:22:35: did it!! 

所以你可以清楚地看到if（this.state.employees！== null）来自

<ListView
                enableEmptySections
                dataSource={this.props.dataSource}
                renderRow={(classi) => {
                    if (this.state.employees) {
                        const date = new Date();
                        const year = date.getFullYear();
                        const month = date.getMonth() + 1;
                        const day = date.getDate();
                        let wantedEmployee = null;
                        if (this.state.employees !== null) {
                            this.state.employees.forEach(employee => {
                                if (employee.uid === classi.employeeUid)
                                    wantedEmployee = employee;
                            });
                            if (classi.year === year && classi.month === month && day === classi.day)
                                return <FlatListItem class={classi} employee={wantedEmployee} />;
                            else
                                return null;
                        }
                        else
                            return null;
                    }
                }

                }

根本不工作。有任何想法吗？

Answer 1

这是因为渲染函数在componentWillReceiveProps之前触发，因此当调用状态尚未更新时，console.log在调用时为null。

Answer 2

你有令人信服的理由说你使用componentWillReceiveProps吗？

如果没有，我认为componentDidMount应该适用于这种情况。

componentDidMount() {
  // receive wantedEmployee from parent component set default value to be null if employee prop wasn't passed from parent component
  const {employee = null} = this.props;       

  // update employee state with employee from this.props
  this.setState({ employee }) // same as {employee: employee}
}

此外，如果ListView中的状态发生更改，此组件将以更新状态重新呈现其子组件。如果您有任何理由打算特别使用componentWillReceiveProps，请通过评论告诉我。