Question

在下面的代码中，“我运行”组件将收到道具，以确保我在员工状态下通过它。在我确保员工不再为null之后，我想显示其信息，但不会显示。我用console.logged“ dit it”来查看员工满载并传递状态时日志是否会记录，并且日志看起来很好。那么，为什么当console.log实际运行时我的文本却不出现？（数据是从firebase提取的，这就是为什么我使用component会收到道具的原因）

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;

我将道具传递给FLatListItem的方式：

<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，请在评论中告知我。

重新渲染后不显示文字

2 个答案: