如何更新 Flatlist 中的项目值

Question

这是我的代码，我正在尝试列出用户回复、用户喜欢和不喜欢，但每当我按下喜欢或不喜欢时，项目值都不会改变。 我只想更改特定项目的值而不是所有列表。

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;

Answer 1

您没有在 doDisLikePost 和 doLikePost 方法中正确更新状态。

FlatList 使用 PureComponent 这将防止浪费的重新渲染

FlatList 不会知道它需要重新渲染任何项目，因为它也是一个 PureComponent，并且道具比较不会显示任何更改

查看FlatList documentation中演示PureComponent的更复杂的示例@

希望对你有帮助。