Блог

 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(() =gt; {  fetch(jsonUrlLocal) //the error appears exactly when i write this line  .then((response) =gt; response.json())  .then((json) =gt; setData(json.movies))  .catch((error) =gt; alert(error))  })  

И это FlatList то, что я использую для отображения данных из JSON:

 lt;FlatList   data={data}  keyExtractor={({id}, index) =gt; id}  renderItem={({item}) =gt; (  lt;Textgt;  {item.title}, {item.realeseYear}  lt;/Textgt;  )}  /gt;  

Короче говоря: когда я использую внешний JSON с URL-адреса, мой плоский список работает, но когда я просто меняю URL его на локальный path/to/the/file/ , приложение возвращает мне сообщение об ошибке: Type Error: Network request failed . OBS: содержимое внутри локального JSON-это в точности НЕОБРАБОТАННАЯ копия внешнего JSON. Я уверен, что в локальном JSON нет ошибок ввода.

Когда вы require() создаете локальный .json файл, я ожидал бы, что произойдет, если вместо URL-адреса появится объект. Затем Fetch ужалит этот объект и сделает запрос '[object Object]' , который, естественно, завершится неудачей.

Поскольку вы уже require() сделали это, нет необходимости доставать его. Он уже проанализирован и готов к использованию.

 const mockData = require('../../json/MOCK_DATA.json');     lt;FlatList   data={mockData}  keyExtractor={({id}, index) =gt; id}  renderItem={({item}) =gt; (  lt;Textgt;  {item.title}, {item.realeseYear}  lt;/Textgt;  )}  /gt;