我遇到了一个很大的问题,我不知道自己在做什么错。我还尝试调试所有内容,但没有找到任何解决方案。
首先让我说我有两个组成部分。从组件A,我向组件B发送一些道具(数组)。组件B,我将道具加载到我的状态,然后更改了平面列表中的一些数据,并将其存储在该组件的状态中。当我返回上一个屏幕时,组件A在哪里,然后又回到B,该清单列表仍然相同,并且PROPS保持不变。
屏幕A的初始道具:(当我第一次进入B组件时)
"listOfStudents":[{"key":"Suana Kristovski","id":"1358","checked":false,"o":false,"n":false}]
当我更改清单中的项目并返回时,这是到达组件B的道具:
listOfStudents":[{"key":"Suana Kristovski","id":"1358","checked":true,"o":false,"n":false}]
从false-> true进行检查,
问题是我所做的一切,只有在我的待办事项列表中的项目更改时,我才更改状态。
屏幕B中的代码:
componentDidMount() {
//console.log('Izvedem se vedno');
console.log('List of students Diary hours: ' + JSON.stringify(this.props.listOfStudents));
this.setState({
data: this.props.navigation.state.params.props.listOfStudents,
textOpombe: this.props.navigation.state.params.props.notes,
textVsebinaUre: this.props.navigation.state.params.props.lesson,
finished: this.props.navigation.state.params.props.finished,
absent: parseInt(this.props.navigation.state.params.props.apsent.substring(0,1)),
});
if(this.props.navigation.state.params.props.listOfStudents.length >= 2) {
this.setState({
height: 130
});
}
this.props.navigation.addListener('willBlur', (playload)=>{
});
}
我的单位列表:
<FlatList
ref={(list) => this.myList = list}
style={[styles.flatList,{height: this.state.height}]}
data={this.state.data}
scrollEnabled = {this.state.scrollingChild}
contentContainerStyle={{ padding: 15 }}
renderItem={({ item }) => (
<View style={styles.listItemStyle}>
<View style={{flexDirection: 'row', marginBottom: 7, }}>
{
item.checked &&
<TouchableOpacity
onPress={this.changeCheckedToFalse.bind(this,item)}>
<View style={styles.checked} />
</TouchableOpacity> ||
<TouchableOpacity
onPress={this.changeCheckedToTrue.bind(this,item)}>
<View style={styles.unchecked} />
</TouchableOpacity>
}
<Text style={{color: '#000', opacity: 0.6}}>{item.key}</Text>
{
item.checked &&
<View style={{position: 'absolute', right: 0 }}>
<View style={{flexDirection: 'row'}} >
{
item.o &&
<TouchableOpacity
style={[styles.touchable1Ch,styles.iconStyle1]}
onPress={this.changeSelectionO.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 18, alignSelf: 'center' }}>O</Text>
</TouchableOpacity> ||
<TouchableOpacity
style={[styles.touchable1,styles.iconStyle1]}
onPress={this.changeSelectionO.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 15, alignSelf: 'center' }}>O</Text>
</TouchableOpacity>
}
{
item.n &&
<TouchableOpacity
style={[styles.touchable2Ch,styles.iconStyle1]}
onPress={this.changeSelectionN.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 18, alignSelf: 'center' }}>N</Text>
</TouchableOpacity> ||
<TouchableOpacity
style={[styles.touchable2,styles.iconStyle1]}
onPress={this.changeSelectionN.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 15, alignSelf: 'center' }}>N</Text>
</TouchableOpacity>
}
</View>
</View>
}
</View>
{
this.props.navigation.state.params.props.listOfStudents !== undefined && this.props.navigation.state.params.props.listOfStudents.length >= 2 ?
<View style={styles.line} /> : <Text></Text>
}
</View>
)}
keyExtractor={item => item.id}
/>
更改列表的方法:
changeSelectionO(item) {
var data2 = this.state.data;
var itemIndex = data2.map(function (x) { return x.key; }).indexOf(item.key);
if(data2[itemIndex].o) {
data2[itemIndex].o = false;
} else {
data2[itemIndex].o = true;
if(data2[itemIndex].n) {
data2[itemIndex].n = false;
}
}
this.setState({
data: data2
});
//this.props.listOfStudents
}
changeSelectionN(item) {
var data2 = this.state.data;
var itemIndex = data2.map(function (x) { return x.key; }).indexOf(item.key);
if(data2[itemIndex].n) {
data2[itemIndex].n = false;
} else {
data2[itemIndex].n = true;
if(data2[itemIndex].o) {
data2[itemIndex].o = false;
}
}
this.setState({
data: data2
});
//this.props.listOfStudents
}
你能告诉我道具为什么变吗?