像 btns 这样的 facebook 一样，在 flatlist 中单独更改特定组件的状态 [英] Change the state of particular component individually in flatlist as in facebook like btns

问题描述

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

I've a lists of like icons in a flatlist. I want to change the color if the particular icon is clicked. But if I use likeStatus state to do it and click any icon, then the color of all the icons will change. How can I treat individual icon separately in flatlist using state? I've tried a lot but in vain. Any help is appreciated. Thanks in advance

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}
         />
    );
}

推荐答案

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

There are many solutions to this problem but my suggestion is this

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

In your main .js file change render like this.

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>
);
}
}

这是一个干净的方法来做到这一点.只需在另一个类中呈现您的 FlatList 项目，这样您就可以为每个项目拥有单独的状态.

This is a clean way to do this. Just render your FlatList items in another class so that you can have a separate state for each item.

这篇关于像 btns 这样的 facebook 一样，在 flatlist 中单独更改特定组件的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！