Question

我使用React和Flask API制作了一个Like函数，它工作得很好，可以进行Like操作，但仅在刷新整个列表时才会显示。我想以某种方式刷新帖子中的“赞”图片和“赞”计数。

我试图将extraData放入FlatList中，但这不能解决我的问题...

handleClick() {
    const headers = {
      'Authorization': 'jwt ' + this.props.jwt
    };
    const action = this.props.has_liked?  'unlike':'like' 
    axios.post("http://127.0.0.1:5000/API/likeaction",{
        id: this.props.id,
        action: action
    }, {
      headers: headers
    })
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error)
    });
    this.setState({liked: action})
  }
    render() {
      const img = this.props.has_liked?  require('../assets/icons/heart-filled.png') : require('../assets/icons/heart-no-fill.png') 
        return(
        <View style={{flex:1, marginTop: 10, marginBottom:16, left: 20}}>
         <View style={{flex: 1, flexDirection: 'row'}}> 
         <Image source={this.props.image_uri} style={{height:42, width: 42, borderRadius:21}}/>
          <Text style={{left:20,paddingTop:6}}>{this.props.author}</Text>
          <Text style={{position: 'absolute', right: 40, paddingTop:6,fontSize:12,color:'#babbbc'}}> {this.props.date} </Text>
         </View>
        <View style={{flex:1, left: 60, right:20,width: '70%', marginTop:-10}}>
          <Text style={{fontWeight:'bold',fontSize:18,marginBottom:6}}>{this.props.title} </Text>
          <Text style={{fontSize:16,marginBottom:6 }}>{this.props.content}</Text>
        <View style={{flex: 1, flexDirection: 'row'}}>
          <TouchableOpacity onPress={this.handleClick}>
          <Image style={{width:24, height:24, marginBottom:6, marginTop:6}} source={img} />
          </TouchableOpacity>
          <Text style={{paddingTop:10, marginLeft:6, fontSize:14,color:'#bfbfbf'}}>{this.props.likes}</Text>
        </View>
        </View>
      </View>
      );
    }

  }

<FlatList
            data={this.state.dataSource}
            extraData={this.state}
            renderItem={({item}) => <PostView title={item.title}
                                        content={item.content}
                                        author={item.author} 
                                        date={item.date_posted} 
                                        likes={item.likes} 
                                        has_liked={item.has_liked}
                                        jwt = {this.props.screenProps.jwt}
                                        id = {item.id}
                                        image_uri={{uri:'http://127.0.0.1:5000/static/profile_pics/'+item.profile_image}}/> }
                                        refreshing={this.state.refreshing}
                                        onRefresh={this.handleRefresh}
                                        keyExtractor={item => item.id}/>
        </View>

Answer 1

在家里尝试

this.state = {
        loading: true,
        email: '',
        error: '',
        refreshing: false,
        dataSource: [],
        updated: false
      }



handleChange = () => {
    this.setState({ updated: true })
    }



handleRefresh = () => {
 this.setState({
   refreshing: true,
   data: this.state.dataSource
  }, () => {
    this.makeRemoteRequest()
   })
        }

替换

<PostView title={item.title}
.... 
/>

使用

<PostView title={item.title}
    .....
    handleChange={this.handleChange}/>






    extraData={this.state}

and update

和

  handleClick() {
    const headers = {
      'Authorization': 'jwt ' + this.props.jwt
    };
    axios.post("http://127.0.0.1:5000/API/likeaction",{
        id: this.props.id,
    }, {
      headers: headers
    })
    .then((response) => {
      console.log(response.data);
      if(response.data.account == "liked"){
        this.setState({liked:true})
      }else{
        this.setState({liked:false})
      }
    })
    .catch((error) => {
      console.log(error)
    });
  }

使用

handleClick() {
    const headers = {
      'Authorization': 'jwt ' + this.props.jwt
    };
    axios.post("http://127.0.0.1:5000/API/likeaction",{
        id: this.props.id,
    }, {
      headers: headers
    })
    .then((response) => {
      console.log(response.data);
      this.props.handleChange(true);
      if(response.data.account == "liked"){
        this.setState({liked:true})
      }else{
        this.setState({liked:false})
      }
    })
    .catch((error) => {
      console.log(error)
    });
  }


const img = this.state.liked?  require('../assets/icons/heart-filled.png') : require('../assets/icons/heart-no-fill.png')

使用

const img = this.state.liked ?  require('../assets/icons/heart-filled.png') : require('../assets/icons/heart-no-fill.png')

Answer 2

extraData：

extraData={{this.state}}

并将this.setState({liked: action})放在此处：

.then((response) => {
      console.log(response.data);
      this.setState({liked: action})
    })

如何在React-Native中刷新FlatList中的单个项目？

2 个答案: