如何在React中查询本地JSON文件

Question

我正在尝试进行动态搜索，但我正在使用本地 JSON 文件。我找到了大量有关如何通过 API 进行查询的信息，但我似乎不知道如何为代码的查询部分输入 JSON 文件。以下是我遇到问题的部分。有没有办法像我在这里尝试的那样添加文件（这是 api url 所在的位置），还是我必须做一些完全不同的事情？谢谢。

useEffect(() => {
  const fetchItems = async () => {
    setIsLoading(true)
    const result = await axios(
      `../../../static/movie-reviews.json?name=${query}`
    )

Answer 1

不能这样查询。

你可以像这样过滤json

const data = require('../../../static/movie-reviews.json')

const filteredData = data.filter(dat => dat.name === query) 

Answer 2

您正在使用本地 JSON 文件，不需要使用 Axios 来获取 JSON 文件，您可以直接导入它并根据您的查询过滤其内容。

具体方法如下：

import React, { useState, useEffect } from 'react';
import movieReviews from '../../../static/movie-reviews.json'; // Import the local JSON file

const YourComponent = () => {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const filterItems = () => {
      setIsLoading(true);
      // Filter the movieReviews based on the query
      const filtered = movieReviews.filter(review => review.name.toLowerCase().includes(query.toLowerCase()));
      setFilteredItems(filtered);
      setIsLoading(false);
    };

    filterItems();
  }, [query]);

  return (
    <div>
      {/* Your UI for search input and displaying filteredItems */}
    </div>
  );
};

export default YourComponent;