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))
})
這是FlatList我用來顯示來自 JSON 的資料的：
<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 沒有打字錯誤。
uj5u.com熱心網友回復：
當你require()是一個本地.json檔案時，我希望發生的是獲取一個物件而不是一個 URL。然后 Fetch 會刺痛該物件并向 發出請求'[object Object]'，這自然會失敗。
既然你已經require()d了，就沒有必要去取了。它已經被決議并可以使用。
const mockData = require('../../json/MOCK_DATA.json');
<FlatList
data={mockData}
keyExtractor={({id}, index) => id}
renderItem={({item}) => (
<Text>
{item.title}, {item.realeseYear}
</Text>
)}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/330843.html