如何在 React Native 中巧妙地将数据传递给不同函数？

2024-03-09 20:38:54

在 React Native 中将数据传递给不同函数的技巧

在 React Native 开发中，将数据从一个函数传递到另一个函数是一个常见任务。但是，这样做并不总是那么容易，尤其是当数据需要在不同的组件或模块之间共享时。

问题

最常见的错误之一是尝试直接将数据从一个函数传递到另一个函数，而另一个函数无法访问该数据。这是因为数据的作用域仅限于该函数。

例如，考虑以下代码片段：

const handleBarCodeScanned = async ({ type, data }) => {
  const scannedCode = data; // 已扫描的条形码
  getStore(); // 获取 store 中的数据
};

const getStore = async () => {
  // 试图访问已扫描的条形码，但它不存在
  const scannedCode = await store.getState().scannedCode;
};

在这个例子中，handleBarCodeScanned 函数扫描条形码并将其存储在 scannedCode 变量中。然后，它调用 getStore 函数以获取存储在 Redux store 中的数据。但是，getStore 函数无法访问 scannedCode，因为它超出其作用域。

解决方案

有几种方法可以解决此问题：

提升状态： 将 scannedCode 状态提升到父组件中，这样所有子组件都可以访问它。
使用状态管理库： 使用 Redux 或 Context API 等状态管理库，允许您在组件之间共享数据。

优化代码

使用 Redux 优化上面代码片段的示例：

import { useDispatch, useSelector } from 'react-redux';

const handleBarCodeScanned = async ({ type, data }) => {
  dispatch({ type: 'SET_SCANNED_CODE', data });
};

const getStore = async () => {
  const scannedCode = useSelector((state) => state.scannedCode);
};