React native React Native，Flatlist：如何删除'；未读'；注意，一旦你老套了

我正在做一个函数，在开始的时候，所有的消息都是“未读”。。一旦点击该消息，未读内容将消失，如下示例：

我制作了一个组件Card.js：

import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity,  View } from 'react-native'

function Card({
    img,
    userType,
    visible,
    onPress,
}) {
    return (
        <TouchableOpacity style={styles.container} onPress={onPress}>
            <View style={styles.container}>
      
            <Image style={styles.img} source={img}/>
            {/** userType: 0:teacher  1:student 2.other */}
            {userType===0&&(
                <Text style={styles.txt}>teacher</Text>
            )}
             {userType===1&&(
                <Text style={styles.txt}>student</Text>
            )}
             {userType===2&&(
                <Text style={styles.txt}>other</Text>
            )}

            {visible===1&&(
                 <Text style={styles.txt_notice}>Unread</Text>
            )}
            
            </View>
        </TouchableOpacity>
    );
}


const styles = StyleSheet.create({
    container : {
        width : '90%',
        flexDirection : 'row',
        justifyContent :'center',
        alignItems : 'center',
        marginTop : 10,

    },
    txt : {
        fontSize : 18,
        marginLeft : 20,
    },
    img : {
        width :100,
        height : 100,
        borderRadius : 50,
    },
    txt_notice :{
        fontSize : 16,
        color :'#DC143C',
        marginLeft :10,
    }
})
export default Card;

从“React”导入React；
从“react native”导入{图像、样式表、文本、TouchableOpacity、视图}
功能卡({
img，
用户类型，
看得见的
新闻界，
}) {
返回(
{/**用户类型：0:教师1:学生2.其他*/}
{userType==0&&(
老师
)}
{userType==1&&(
学生
)}
{userType==2&&(
其他
)}
{可见===1&&(
未读
)}
);
}
const styles=StyleSheet.create({
容器：{
宽度：“90%”，
flexDirection:'行'，
辩护内容：'中心'，
对齐项目：“居中”，
玛金托普：10，
},
txt:{
尺码：18，
marginLeft:20，
},
img：{
宽度：100，
身高：100，
边界半径：50，
},
请注意：{
尺寸：16，
颜色：“#DC143C”，
边缘左：10，
}
})
导出默认卡；

我使用的屏幕是TryScreen.js：

import React, { useState,useEffect } from 'react';
import { FlatList, StyleSheet, View } from 'react-native'
import Card from '../components/Card';

const clients = [
    {id:1,img:{uri:'https://i.pinimg.com/564x/64/02/cb/6402cbd3d436caecad2f3e300d67ebd1.jpg'},userType:0,visible:1},
    {id:2,img:{uri:'https://i.pinimg.com/236x/34/d6/8c/34d68c7694e1c43204c0dbc623ce4cb8.jpg'},userType:1,visible:1},
    {id:3,img:{uri:'https://i.pinimg.com/236x/a0/14/26/a014261951fae6dcc16b4d555f0ef089.jpg'},userType:2,visible:1},
    {id:4,img:{uri:'https://i.pinimg.com/236x/96/bf/b6/96bfb641920f527e4fcc9ca23501e222.jpg'},userType:2,visible:1},
    {id:5,img:{uri:'https://i.pinimg.com/236x/8b/6e/d9/8b6ed9f0cd6de175537879233a017b0c.jpg'},userType:1,visible:1},
    {id:6,img:{uri:'https://i.pinimg.com/236x/0e/16/7f/0e167fab5f152a630fd80dfa1ad3e47c.jpg'},userType:0,visible:1},
]
function TyeScreen(props) {
  
   
    const[clients_list,setClients]=useState([]);
     useEffect(()=>{
        setClients(clients);
     },[]);
    
    return (
        <View style={styles.container}>
            <FlatList
            data = {clients}
            keyExtractor = {item =>item.id.toString()}
            renderItem = {({item,index})=>(<Card
            img = {item.img}
            userType = {item.userType}
            visible = {item.visible}
            onPress = {()=>{
                item.visible -=1;
                setClients(item);
            }}
            />)}
            />
            
        </View>
    );
}

const styles = StyleSheet.create({
    container : {
        flex : 1,
        backgroundColor : '#ffffff',
    }
})

export default TyeScreen;

import React，{useState，useffect}来自“React”；
从“react native”导入{FlatList，StyleSheet，View}
从“../components/Card”导入卡片；
常量客户端=[
{id:1，img:{uri:'https://i.pinimg.com/564x/64/02/cb/6402cbd3d436caecad2f3e300d67ebd1.jpg'}，用户类型：0，可见：1}，
{id:2，img:{uri:'https://i.pinimg.com/236x/34/d6/8c/34d68c7694e1c43204c0dbc623ce4cb8.jpg'}，用户类型：1，可见：1}，
{id:3，img:{uri:'https://i.pinimg.com/236x/a0/14/26/a014261951fae6dcc16b4d555f0ef089.jpg'}，用户类型：2，可见：1}，
{id:4，img:{uri:'https://i.pinimg.com/236x/96/bf/b6/96bfb641920f527e4fcc9ca23501e222.jpg'}，用户类型：2，可见：1}，
{id:5，img:{uri:'https://i.pinimg.com/236x/8b/6e/d9/8b6ed9f0cd6de175537879233a017b0c.jpg'}，用户类型：1，可见：1}，
{id:6，img:{uri:'https://i.pinimg.com/236x/0e/16/7f/0e167fab5f152a630fd80dfa1ad3e47c.jpg'}，用户类型：0，可见：1}，
]
功能TyesScreen（道具）{
const[clients_list，setClients]=useState（[]）；
useffect（（）=>{
客户（客户）；
},[]);
返回(
item.id.toString（）}
renderItem={（{item，index}）=>({
可见项-=1；
设置客户（项目）；
}}
/>)}
/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#ffffff”，
}
})
导出默认TyeScreen；

---

我的想法是，当点击邮件时，“未读”通知将消失。。。我尝试了很多方法，但都没有成功。。。你能帮我看一下我的代码吗，非常感谢

您的客户列表必须处于状态，例如

const [clients, setClients] = useState();

然后在中初始化它们

useEffect(() => {
    setClients(...)
})

然后在onPress中更改所选客户端的属性并再次更改状态

编辑 强制重新渲染的简单实现

onPress = (client) => {
  client.unread = -1;
  const newclients = {...clients};
  setClients(newclients);
} 

---

嘿，克里斯蒂安，非常感谢你的回答。我已经试过你说的了。我添加了：const[clients_list，setClients]=useState（[]）；useffect（（）=>{setClients（clients）；}，[]）；并修改了onPress:onPress={（）=>item.visible-1}；但是仍然不起作用..如果我有错误，请你帮我看看，再次感谢你！！react native的基本功能是状态管理，当你想重新渲染时，你需要更新你的状态，我添加了一个示例Hey Christian，我尝试了你的建议，出现了一个新问题。。当我点击其中一个项目时，所有列表都消失了。。。我已经用你的建议重新编辑了代码，你能看一下吗？非常感谢你的耐心！！嗨，克里斯坦，非常感谢你的提示，我终于注意到问题出在哪里了，我已经根据你的建议进行了修改，现在效果很好，非常感谢你，我的朋友！