无法在我的 RN 项目中使用打字稿“useEffect”获取本地 json

Posted 2023-02-16

【中文标题】无法在我的 RN 项目中使用打字稿“useEffect”获取本地 json

【英文标题】：Can't fetch local json using typescript "useEffect" in my RN Project

【发布时间】：2021-12-08 16:00:30

【问题描述】：

const jsonUrlExternal = require('https://reactnative.dev/movies.json'); //this works
const jsonUrlLocal  = require('../../json/MOCK_DATA.json'); //this doesn't work

当我使用第一个 const jsonUrlExternal 时，我的应用程序运行良好并以 JSON 格式获取数据。但是，当我只是将 URL 更改为本地路径时，它会给我一个错误：Type Error: Network request failed。下面是我用来获取本地和外部 JSON 文件的代码：

    const [data, setData] = useState([]);

    useEffect(() => 
        fetch(jsonUrlLocal) //the error appears exactly when i write this line
        .then((response) => response.json())
        .then((json) => setData(json.movies))
        .catch((error) => alert(error))
    )

这是我用来显示来自 JSON 的数据的 FlatList：

                <FlatList 
                    data=data
                    keyExtractor=(id, index) => id
                    renderItem=(item) => (
                        <Text>
                            item.title, item.realeseYear
                        </Text>
                    )
                />

简而言之：当我使用来自 URL 的外部 JSON 时，我的 FlatList 可以工作，但是当我只是将 URL 更改为本地 path/to/the/file/ 时，应用程序会返回错误消息：Type Error: Network request failed。 OBS：本地 JSON 中的内容正是 ExternalJson 的 RAW Copy。我确定本地 JSON 没有输入错误。

【问题讨论】：

您不只是正常导入 JSON 文件（使用***导入）是否有原因？该文件已经存在，您不会从其他地方获取它。

【参考方案1】：

当您 require() 本地 .json 文件时，我期望发生的是获取对象而不是 URL。然后，Fetch 会刺探该对象并向'[object%20Object]' 发出请求，这自然会失败。

因为你已经require()d 了，所以没有必要去获取它。它已经被解析并可以使用了。

const mockData = require('../../json/MOCK_DATA.json');



                <FlatList 
                    data=mockData
                    keyExtractor=(id, index) => id
                    renderItem=(item) => (
                        <Text>
                            item.title, item.realeseYear
                        </Text>
                    )
                />

【讨论】：

在这个简单的项目中还有其他方法可以使用我的本地 JSON 吗？我不想使用外部 JSON，因为我正在构建一个 CRUD，所以数据将存储在本地。我尝试在本地主机中上传并使用 URL 访问文件，但我得到了XX.XX/MOCK_DATA.json could not be found within the project。谢谢你帮助我。另外，对不起我的英语不好。

很大程度上取决于您的构建设置，但如果您 require()d .json 文件，您可以将其用作对象。你不需要获取它或任何东西。

在require() 之后尝试console.log()ing jsonUrlLocal。它应该是一个对象（或数组）。