React Native中能否将函数获取的值传入组件？点击用户项传递数据至详情组件实现问询

你的思路完全没问题，只是现有代码存在一些作用域和状态管理的小问题，调整后就能实现需求。下面是具体的修改方案：

第一步：修正状态与函数作用域 #

首先，我们需要在组件的state中新增selectedUser字段存储选中的用户信息，同时把所有函数移到类的顶层（避免嵌套在constructor或其他函数里导致作用域问题）：

class DetailsUsersScreen extends Component { 
  constructor(props){ 
    super(props) 
    this.state = { 
      users: [],
      content: true, // 控制列表/详情的显示切换，初始显示列表
      selectedUser: null // 存储选中的用户信息
    }; 
    // 绑定函数作用域（或者用箭头函数自动绑定）
    this.expandDetail = this.expandDetail.bind(this);
    this.getUsers = this.getUsers.bind(this);
  }

  // 切换显示状态并存储选中的用户
  expandDetail(selectedUser) {
    this.setState(prevState => ({
      content: !prevState.content,
      selectedUser: selectedUser
    }));
  }

  // 获取用户列表
  async getUsers() { 
    try {
      const res = await Http.instance.get("random link which retrieves a set of users"); 
      this.setState({ users: res, allClients: res });
    } catch (err) {
      console.error('获取用户失败:', err);
    }
  }

  // 组件挂载时调用获取用户列表
  componentDidMount() {
    this.getUsers();
  }

  render() { 
    const { users, content, selectedUser } = this.state; 
    return ( 
      <View> 
        {content ? 
          <View style={{shadowOffset: { width: 0, height: 3, }, marginTop: 20, backgroundColor:'#48555D', shadowOpacity: 0.7, shadowRadius: 4.65, elevation: 3, paddingTop: 10, paddingHorizontal: 10, borderRadius: 5 }}>
            <View style={{flex: 0.8, flexDirection: 'row', flexWrap: 'wrap', margin:10, justifyContent: 'space-between', backgroundColor:'green' }}>
              <Text style={styles.titleText}>Today </Text>
              <Image source={require('../../assets/download.png')} />
            </View>
            <View style={{paddingTop:30}}>
              <FlatList 
                data={users} 
                keyExtractor={(item) => item.metadata.fingerid} // 必须添加keyExtractor，避免警告
                renderItem={({item}) => ( 
                  <TouchableHighlight 
                    activeOpacity={0.9} 
                    underlayColor="#7a7a7a" 
                    onPress={() => this.expandDetail(item)} // 点击时直接传递当前用户
                  >
                    <View style={{flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', paddingBottom: 15}}>
                      <View>
                        <Text style={styles.nIdentifyText}>{item.metadata.fingerid}</Text>
                        <Text style={styles.nameText}>{item.name}</Text>
                        <Text style={styles.emailText}>{item.email}</Text>
                      </View>
                      <View>
                        <Text style={styles.typeText}>{item.type}</Text>
                        <Text style={styles.emailText}>{item.fecha}</Text>
                        <Text style={styles.dateText}>{item.datetime}</Text>
                      </View>
                    </View>
                  </TouchableHighlight>
                )} 
              />
            </View>
          </View>
          : <UserDetailExpanded user={selectedUser} />} {/* 把选中的用户作为props传递 */}
        </View>
      ) 
    } 
  }

第二步：修改UserDetailExpanded组件接收并渲染用户信息 #

现在修改详情组件，接收传递过来的user props，然后渲染用户的具体信息：

import React, { Component } from "react"; 
import { View, Text, Button, StyleSheet } from "react-native"; 

class UserDetailExpanded extends Component { 
  render() { 
    const { user } = this.props;
    // 如果用户信息还没加载，显示占位符
    if (!user) {
      return <Text>Loading user details...</Text>;
    }

    return ( 
      <View style={styles.container}>
        <Text style={styles.title}>用户详情</Text>
        <Text style={styles.detailText}>ID: {user.metadata.fingerid}</Text>
        <Text style={styles.detailText}>姓名: {user.name}</Text>
        <Text style={styles.detailText}>邮箱: {user.email}</Text>
        <Text style={styles.detailText}>类型: {user.type}</Text>
        <Text style={styles.detailText}>日期: {user.fecha}</Text>
        <Text style={styles.detailText}>时间: {user.datetime}</Text>
        {/* 可以添加返回按钮，切换回列表 */}
        <Button 
          title="返回列表" 
          onPress={() => this.props.onBack && this.props.onBack()} 
        />
      </View>
    ) 
  } 
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    padding: 15,
    backgroundColor: '#fff',
    borderRadius: 5,
    elevation: 3
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 15
  },
  detailText: {
    fontSize: 16,
    marginBottom: 8
  }
})

export default UserDetailExpanded;

第三步：添加返回功能（可选） #

如果需要从详情页返回列表，可以在DetailsUsersScreen里给UserDetailExpanded传递一个回调函数：

// 在DetailsUsersScreen的render里修改
<UserDetailExpanded 
  user={selectedUser} 
  onBack={() => this.setState({ content: true })} 
/>

关键说明 #

1. 状态管理优化：新增selectedUser存储选中的用户，避免依赖临时函数传递数据，状态更清晰。
2. 函数作用域修正：把所有函数移到类顶层，避免嵌套导致的作用域丢失问题，同时用bind或者箭头函数确保this指向正确。
3. props传递：通过props把用户信息传递给详情组件，这是React Native中组件间传递数据的标准方式。
4. keyExtractor：给FlatList添加keyExtractor，避免React渲染列表时的警告，提升性能。

内容的提问来源于stack exchange，提问作者mundus