React Native页面间数据传递：Lihat.js到Detail.js实现方法

一、修改Lihat.js的详情按钮传参 #

你原来的Detail按钮传参逻辑错误，直接在循环中传递当前条目的完整数据即可：

// 替换Lihat.js中原来的Detail按钮代码
<Text style={style.textListLihat} onPress={()=>this.props.navigation.navigate('Detail', {item: val})}>Detail</Text>

说明：在map循环里，val就是当前遍历到的条目数据，直接把它作为参数传给Detail页面，不需要调用listData.map()（这是你之前的错误点）。

二、修改Detail.js接收并展示数据 #

Detail页面无需再请求整个列表，直接从导航参数中获取传递过来的条目数据，然后渲染详情：

import React, { Component } from 'react';
import { View, Text} from 'react-native';
import { style } from './Style';

class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentItem: this.props.route.params.item
    };
  }

  render() {
    const { currentItem } = this.state;
    return (
      <View style={style.viewWrapper}>
        <View style={style.viewList}>
          <Text style={style.textListNama}>Nama: {currentItem.nama}</Text>
          <Text style={style.textList}>NIM: {currentItem.nim}</Text>
          <Text style={style.textList}>Prodi: {currentItem.prodi}</Text>
          <Text style={style.textList}>No Telepon: {currentItem.no_telp}</Text>
          <Text style={style.textList}>Alamat: {currentItem.alamat}</Text>
        </View>
      </View>
    );
  }
}

export default Detail;

关键修改点： #

1. 移除了无用的Lihat组件和路由相关导入
2. 不再调用ambilListData请求整个列表，直接通过this.props.route.params.item获取传递的条目数据
3. 直接渲染当前条目的所有字段

备选方案：通过ID请求实时详情数据 #

如果需要在详情页获取最新数据，可以传递条目ID，再通过Fetch请求单个详情：

Lihat.js修改传参： #

<Text style={style.textListLihat} onPress={()=>this.props.navigation.navigate('Detail', {itemId: val.id})}>Detail</Text>

Detail.js修改为根据ID请求数据： #

import React, { Component } from 'react';
import { View, Text} from 'react-native';
import { style } from './Style';

class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nama:'',
      nim:'',
      prodi:'',
      no_telp:'',
      alamat:'',
    };
    this.url = "http://192.168.100.161/mhs/mhs.php" // 修正为和Lihat一致的http协议
  }

  componentDidMount(){
    this.ambilDetailData()
  }

  async ambilDetailData(){
    const itemId = this.props.route.params.itemId;
    // 假设后端支持通过op=detail&id=xxx获取单个数据
    await fetch(`${this.url}/?op=detail&id=${itemId}`)
    .then((response)=>response.json())
    .then((json)=>{
      const detail = json.data.result[0];
      this.setState({
        nama: detail.nama,
        nim: detail.nim,
        prodi: detail.prodi,
        no_telp: detail.no_telp,
        alamat: detail.alamat
      })
    })
    .catch((error)=>{
      console.log(error);
    })
  }

  render() {
    const { nama, nim, prodi, no_telp, alamat } = this.state;
    return (
      <View style={style.viewWrapper}>
        <View style={style.viewList}>
          <Text style={style.textListNama}>Nama: {nama}</Text>
          <Text style={style.textList}>NIM: {nim}</Text>
          <Text style={style.textList}>Prodi: {prodi}</Text>
          <Text style={style.textList}>No Telepon: {no_telp}</Text>
          <Text style={style.textList}>Alamat: {alamat}</Text>
        </View>
      </View>
    );
  }
}

export default Detail;

注意事项： #

• 确保后端API支持op=detail&id=xxx格式的请求，返回单个条目的数据
• 统一URL的协议（http/https），避免请求失败

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