React Native函数式组件及自定义Fetch组件向调用组件返回值方法

嘿！咱们逐个解决你的问题，用清晰的例子和修复方案来帮你搞定。

1. 如何从React Native函数式组件向父组件返回值？ #

在React（包括React Native）的函数式组件里，最直接好用的方式就是让父组件传一个回调函数给子组件，子组件需要返回值的时候，调用这个回调把数据传回去就行。当然你也可以用Context API或者Redux这类状态管理工具，但回调是最基础、不需要额外依赖的方案。

给你举个简单的例子：

父组件 #

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [childValue, setChildValue] = useState(null);

  // 定义回调函数，用来接收子组件传回来的值
  const handleChildData = (value) => {
    setChildValue(value);
    console.log('从子组件拿到的值：', value);
  };

  return (
    <View>
      <ChildComponent sendDataToParent={handleChildData} />
      <Text>子组件返回的值：{childValue}</Text>
    </View>
  );
};

export default ParentComponent;

子组件 #

import React from 'react';
import { Button } from 'react-native';

const ChildComponent = ({ sendDataToParent }) => {
  const handleButtonPress = () => {
    // 调用父组件传过来的回调，把要返回的值传进去
    sendDataToParent('我是子组件返回的数据哦～');
  };

  return (
    <Button title="点击向父组件传值" onPress={handleButtonPress} />
  );
};

export default ChildComponent;

核心思路很简单：父组件提供一个能接收数据的函数，子组件通过props拿到这个函数并调用，就能完成值的传递啦。

2. 针对你的自定义Fetch封装函数，如何向调用它的组件返回值？ #

你现在的_Fetch函数有个小问题：内部的Promise链没有正确返回结果，导致调用它的组件拿不到最终解析后的数据。咱们需要调整一下函数的Promise结构，确保它能正确返回一个包含最终数据的Promise，这样调用方就能用async/await或者.then()来获取返回值了。

修复后的封装函数 #

import Config from '../config';

// 先补全tryParseJSON工具函数（假设你之前有这个函数，这里给个示例实现）
const tryParseJSON = (text) => {
  try {
    return JSON.parse(text);
  } catch (e) {
    console.error('JSON解析失败：', e);
    return null;
  }
};

const _Fetch = (context, endpoint, init, key = 'data') => {
  // 确保整个函数返回一个Promise，这样调用方才能链式调用或者await
  return fetch(`${Config.base}${endpoint}`, init)
    .then(response => {
      if (!response.ok) {
        // 请求失败的话抛出错误，让调用方可以捕获处理
        throw new Error(`请求失败：${response.status} ${response.statusText}`);
      }
      // 返回response.text()的Promise，继续链式处理
      return response.text();
    })
    .then(text => {
      const obj = tryParseJSON(text);
      if (!obj) {
        throw new Error('响应内容无法解析为JSON');
      }
      // 这里处理你的jsonapi逻辑（就是你注释里的obj....部分）
      // 处理完后返回对应key的数据，或者整个obj
      return obj[key] || obj;
    })
    .catch(error => {
      // 统一捕获错误，也可以直接抛出让调用方自己处理
      console.error('Fetch请求出错：', error);
      throw error; // 重新抛出错误，让调用组件能捕获到
    });
};

export default _Fetch;

调用该函数的组件示例 #

在React Native组件里，你可以用async/await来优雅地获取返回值：

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import _Fetch from './path-to-your-fetch-file';

const FetchDemoComponent = () => {
  const [data, setData] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 调用封装好的_Fetch函数，await拿到返回值
        const result = await _Fetch(
          {}, // 这里传入你的context参数
          '/api/some-endpoint', // 接口路径
          { method: 'GET' }, // 请求配置
          'result' // 可选的key参数，用来指定返回obj里的某个字段
        );
        setData(result);
      } catch (err) {
        setErrorMsg(err.message);
      }
    };

    fetchData();
  }, []);

  if (errorMsg) return <Text>请求出错啦：{errorMsg}</Text>;
  if (!data) return <Text>加载中...</Text>;

  return <Text>获取到的数据：{JSON.stringify(data)}</Text>;
};

export default FetchDemoComponent;

关键修改说明 #

1. 理顺Promise链：把原来嵌套的.then()改成链式返回，确保每个异步操作的结果都能传递到下一个环节，最终整个_Fetch函数返回一个包含最终数据的Promise。
2. 完善错误处理：添加了对response.ok的判断，以及JSON解析失败的捕获，并抛出错误让调用组件可以自行处理异常情况。
3. 优化默认参数：把key的默认值直接放在函数参数里，代码更简洁。

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