这是我的代码,我试图列出用户的答复,用户的喜欢和不喜欢,但是每当我按赞或不喜欢时,项目值就不会改变。 我只想更改特定项目值,而不是所有列表。
class Test extends Component {
constructor(props) {
super(props);
this.state = {
replayList: [],
replayMsg: ""
};
this.doReplayList();
}
static navigationOptions = {
title: "Replay"
};
这是重播列表。
doReplayList() {
var formData = new FormData();
formData.append("cmt_ref", 1185);
formData.append("pageno", 1);
let postData = {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "multipart/form-data"
},
body: formData
};
fetch(Api.commentReplyList, postData)
.then(response => response.json())
.then(responseJson => {
console.log(responseJson);
const STATUS = responseJson.STATUS;
if (STATUS == "FAIL") {
console.log(responseJson.MESSAGES);
} else {
this.setState({
replayList: responseJson.DATA
});
}
})
.catch(error => {
console.error(error);
});
}
我在这里调用like api。
doLikePost(cmt_data) {
var formData = new FormData();
formData.append("like_lgn_id", 172);
formData.append("like_post_id", cmt_data.cmt_post_id);
formData.append("like_cmt_id", cmt_data.cmt_id);
formData.append("like_type", "1");
console.log(formData);
let postData = {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "multipart/form-data"
},
body: formData
};
fetch(Api.likeUnlikePost, postData)
.then(response => response.json())
.then(responseJson => {
console.log(responseJson);
const STATUS = responseJson.STATUS;
if (STATUS == "FAIL") {
console.log(responseJson.MESSAGES);
} else {
this.setState = {
replayList: responseJson.DATA.goodcount
};
console.log(responseJson.MESSAGES);
}
})
.catch(error => {
console.error(error);
});
}
在这里,我正在调用不喜欢的api。
doDisLikePost(cmt_data) {
var formData = new FormData();
formData.append("like_lgn_id", 172);
formData.append("like_post_id", cmt_data.cmt_post_id);
formData.append("like_cmt_id", cmt_data.cmt_id);
formData.append("like_type", "2");
let postData = {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "multipart/form-data"
},
body: formData
};
fetch(Api.likeUnlikePost, postData)
.then(response => response.json())
.then(responseJson => {
const STATUS = responseJson.STATUS;
if (STATUS == "FAIL") {
console.log(responseJson.MESSAGES);
} else {
console.log(responseJson.MESSAGES);
}
})
.catch(error => {
console.error(error);
});
}
在这里设置自定义视图并设置响应数据。
renderItem = ({ item }) => {
return(
<View
style={[{flex: 1,borderBottomColor: Color.colorLine,borderBottomWidth:
2,marginBottom: 15}]}>
<View
style={[styles.row,{justifyContent: "space-between",alignItems: "flex-
start",alignContent: "flex-start",marginTop: 5,marginBottom: 5}]}>
<Image
resizeMethod="scale"
resizeMode="contain"
source={{ uri: item.usr_image }}
style={[styles.icon,{alignSelf: "flex-start",width: 50,height:
50,borderWidth: 1,marginTop: 10,marginRight: 20,marginLeft: 30}]}/>
<View
style={[styles.column,{ alignItems: "flex-start", flex: 1,
marginTop: 10 }]}>
<Text
style={{fontWeight: "bold",fontSize: 12,color:
Color.UserNameColor}}>
{item.usr_name}
</Text>
<View style={styles.row}>
<Text style={{ fontSize: 12, color: Color.colorPost }}>
12/12/18
</Text>
</View>
<Text style={{ fontSize: 12, color: Color.colorPost }}>
{item.cmt_msg}
</Text>
</View>
</View>
<View
style={[styles.row,{justifyContent: "space-around",marginTop:
5,marginBottom: 10,marginRight: 20,marginLeft: 20}]}>
<TouchableOpacity onPress={() => this.doLikePost(item)}>
<View style={styles.row}>
<Image
source={Icon.ic_like}
style={[styles.icon, { margin: 5 }]}
/>
<Text style={{ marginLeft: 5 }}>({item.goodcount})</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.doDisLikePost(item)}>
<View style={styles.row}>
<Image
source={Icon.ic_dislike}
style={[styles.icon, { margin: 5 }]}
/>
<Text style={{ marginLeft: 5 }}>({item.badcount})</Text>
</View>
</TouchableOpacity>
</View>
</View>
)
};
render() {
return (
<View style={[styles.container, { backgroundColor: Color.white }]}>
<FlatList data={this.state.replayList} renderItem={this.renderItem} />
<View
style={{flexDirection: "row",justifyContent:
"center",alignItems: "center",margin: 5}}>
<View
style={{flex: 1,marginRight: 5,borderColor:
"gray",borderRadius: 5,borderWidth: 1}}
>
<TextInput
placeholder={"Write a Replay"}
underlineColorAndroid="transparent"
onChangeText={value => this.setState({ replayMsg: value
})}
style={{padding: 5,marginLeft: 5,fontSize:
12,textAlignVertical: "center"}}
/>
</View>
<TouchableOpacity onPress={this.doReplay.bind(this)}>
<View
style={{elevation: 10,width: 50,height: 50,borderRadius:
30,backgroundColor: Color.white,overflow: "visible",alignItems:
"center",justifyContent: "center"}}>
<Image
source={Icon.send}
style={[styles.icon,{ width: 30, height: 30,
justifyContent: "center" }]}/>
</View>
</TouchableOpacity>
</View>
</View>
);
}
}
export default Test;
答案 0 :(得分:0)
您没有在 doDisLikePost 和 doLikePost 方法中正确更新状态。
FlatList使用 PureComponent ,这将防止浪费的重新渲染
FlatList不知道它需要重新渲染任何项目,因为它也是一个PureComponent,并且prop比较不会显示任何更改
检查更复杂的示例,该示例在FlatList documentation
中演示 PureComponent
希望有帮助。