将 props 传递给 Modal (React Native)

Question

我正在尝试将道具从平面列表传递到模态屏幕，我已经尝试了所有可能的方法来完成这项工作，但我似乎不明白。当我尝试传递道具时，它说它无法将状态更新为只读属性

这里是 useEffect 和 useState

const [proops, setProops] = useState([]);
const [passedProps, setPassedProps] = useState('');

 useEffect(() => {
     const onChildAdd = database().ref('/User/').on('value', function(snapshot) {
   
       const props= [];
       snapshot.forEach(function(userSnapshot) {
       const id = userSnapshot.key;
       const userData = userSnapshot.val();
       
       userData['uid'] = id;
       proops.push(userData);
       
       });
       setProops(proops);
        
       
       });
       
           
        return () =>
           database().ref('/User/' )
               .off('value', onChildAdd);
       
   
   }, [props])

这是平面列表

       <FlatList
data={proops}
ItemSeparatorComponent={() => <Divider />}
keyExtractor={item => item.id}
ListEmptyComponent={() => <ActivityIndicator/> }
renderItem={({ item }) => (
<View style={{flex: 1,  width: '100%', justifyContent: 'flex-start',  alignItems: 'center', color: 'black'}}>

<View style={{flex: 18,  width: '100%', justifyContent: 'flex-start', color: 'black'}}>
<TouchableOpacity onPress={() => setModalVisible(true)}
  
>
        <List.Item title={item.Name} description='Click to open the modal' 
          titleNumberOfLines={1}
    titleStyle={styles.listTitle}
    descriptionStyle={styles.listDescription}
    descriptionNumberOfLines={1}
    onPress={() => setPassedProps(item.Name)}
        />
        </TouchableOpacity>
      
      
</View>
</View>
)}
/>

这里是模态

 <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>

            <TouchableOpacity
              style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableOpacity>

        <Text>{passedProps}</Text>    
</View>
</View>
)}
/>
 </View>
</View>
      </Modal>

错误

*TypeError: 试图分配给只读属性。 *

当我点击平面列表中的项目时会发生这种情况

Answer 1

问题可能是您添加了太多的侦听器。应仅在组件加载后添加侦听器。

useEffect(() => {
     const onChildAdd = database().ref('/User/').on('value', function(snapshot) {
   
       //const props= []; <<< not sure why you would want to do this.
       snapshot.forEach(function(userSnapshot) {
       const id = userSnapshot.key;
       const userData = userSnapshot.val();
       
       userData['uid'] = id;
       proops.push(userData);
       
       });
       setProops(proops);
       });
       
           
        return () =>
           database().ref('/User/' )
               .off('value', onChildAdd);
   }, []) // <<< you want to just add one listener for your list of user. [] means only run this once when component mounts.