在 flatlist 中单独更改特定组件的状态，就像在 facebook 中一样 btns

Question

我在平面列表中列出了类似的图标。如果单击特定图标，我想更改颜色。但是如果我使用 likeStatus 状态来做它并点击任何图标，那么所有图标的颜色都会改变。如何使用状态在平面列表中单独处理单个图标？我已经尝试了很多但都是徒劳的。任何帮助表示赞赏。提前致谢

constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      likeStatus: null,
    };
}

componentDidMount() {
    this._reload();
}

_reload = () => {
    return fetch(url)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          isLoading: false,
          data: responseJson.data
        });
      })
      .catch(error => {
        console.log(error);
    });
 };

likePost = item => {
    this.setState({
      likeStatus: !item.like_status
    });
    if (this.state.likeStatus == true) {
      ToastAndroid.show(`You have unliked the post`, ToastAndroid.SHORT);
    } else {
      ToastAndroid.show(`You have liked the post`, ToastAndroid.SHORT);
    }
    fetch(likeUploadUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        post_id: item.id,
        user_id: item.user_id
      })
    })
      .then(response => response.json())
      .then(responseJson => {
        console.log("likeResponse", responseJson);
      })
      .catch(error => {

      });
  };

_renderItem = item => {
    return (
        _ _ _ _ _ _ _ _ _ _
        _ _ _ _ _ _ _ _ _ _

        <TouchableOpacity
          activeOpacity={0.5}
          onPress={() => this.likePost(item.item)}
          style={{ flexDirection: "row" }} >
              {item.item.like_status != null &&
              item.item.like_status != false ? (
                <FontAwesome5
                  name={"heart"}
                  size={15}
                  style={{color: "blue" }}
                />
              ) : (
                <FontAwesome5
                  name={"heart"}
                  size={15}
                  style={{ color: "gray" }}
                />
              )}
        </TouchableOpacity>
    );
  };

render() {
    return(
        <FlatList
            data={this.state.data}
            renderItem={this._renderItem}
         />
    );
}

Answer 1

这个问题有很多解决方案，但我的建议是这样

在您的主 .js 文件中，像这样更改渲染。

render() {
   return(
      <FlatList
        data={this.state.data}
        renderItem={(item) => <MyItem item={item}/>}
      />
  );

}

//in MyItem.js
export default class MyItem extends React.Component {
    constructor(props){
        super(props);
        this.state={
            like_status: false;
        };
    }

    likePost = item => {
    this.setState({
      like_status: !this.state.like_status
    });
    if (this.state.likeStatus == true) {
      ToastAndroid.show(`You have unliked the post`, ToastAndroid.SHORT);
    } else {
      ToastAndroid.show(`You have liked the post`, ToastAndroid.SHORT);
    }
    fetch(likeUploadUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        post_id: item.id,
        user_id: item.user_id
      })
    })
      .then(response => response.json())
      .then(responseJson => {
        console.log("likeResponse", responseJson);
      })
      .catch(error => {

      });
    };

    render(){
        return (
        _ _ _ _ _ _ _ _ _ _
        _ _ _ _ _ _ _ _ _ _

        <TouchableOpacity
          activeOpacity={0.5}
          onPress={() => this.likePost(this.props.item.item)}
          style={{ flexDirection: "row" }} >
              {this.state.like_status != null &&
              this.state.like_status != false ? (
                <FontAwesome5
                  name={"heart"}
                  size={15}
                  style={{color: "blue" }}
                />
              ) : (
                <FontAwesome5
                  name={"heart"}
                  size={15}
                  style={{ color: "gray" }}
                />
              )}
        </TouchableOpacity>
);
}
}

这是一种干净的方法。只需在另一个 class 中呈现您的 FlatList 项，这样您就可以为每个项设置单独的状态。

在 flatlist 中单独更改特定组件的状态，就像在 facebook 中一样 btns

Change the state of particular component individually in flatlist as in facebook like btns

react-native

react-native-flatlist