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

Question

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工作，但是当我简单地为本地path/to/the/file/更改URL时，应用程序返回错误消息:Type Error: Network request failed。OBS:本地JSON中的内容正是ExternalJson的RAW副本。我确信本地JSON没有输入错误。

Answer 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>
)}
/>