无法在我的 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 可以工作，但是当我只是将 URL 更改为本地 path/to/the/file/ 时，应用程序会返回错误消息：Type Error: Network request failed。 OBS：本地 JSON 中的内容正是 ExternalJson 的 RAW Copy。我确定本地 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>
                    )}
                />