重新渲染后不显示文本
在下面的代码中，我运行组件将接收属性，以确保在employee状态中传递它。在我确定员工不再为空之后，我想显示它的信息，但它没有显示出来。我console.logged“to”，看看当员工完全加载并通过状态并且日志显示正常时，它是否会记录日志。那么，为什么我的文本在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;我将道具传递给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是从fetch from firebase中设置的，这就是我验证id状态为空的原因。如果我输入console.log(‘成功了！’)，则返回来自FlatItemList的console.logs而不是123是：
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;
}
}
}完全不起作用。有什么想法吗？
回答 2
Stack Overflow用户
发布于 2018-09-09 04:26:09
这是因为render函数在componentWillReceiveProps之前触发，因此console.log在get调用时为null，因为状态尚未更新。
Stack Overflow用户
发布于 2018-09-09 04:38:43
您是否有使用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的任何原因，请在评论中告诉我。
https://stackoverflow.com/questions/52238914
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号