从本地 JSON 文件获取时出现 404 网络错误

Question

我正在尝试从存储在同一存储库中的 JSON 文件检索数据。

我尝试直接执行菜单路径“./menuData.json”，我还尝试将此路径存储在变量中并将其插入获取请求中，还尝试从“./menuData.json”将menuData作为模块导入'。我还尝试将其移至公共文件夹并从那里导入，但这返回了一个错误，并表示我必须将其保留在 src 级别目录中。

我期望我的应用程序在渲染时显示餐厅菜单数据，但它没有成功

Answer 1

您不需要通过

menuData

运行

axios.get()

。它已经作为

menuData

提供。

此外，如果它没有改变，则无需将其放入状态。仅放置状态反应数据（需要监视变化的数据）。

示例：

import menuData from './menuData.json'
const filters = ['Appetizers', 'Breakfast', 'Lunch', 'Dinner', 'Drinks']

const FilterableMenu = () => {
  const [filter, setFilter] = React.useState('')
  const currentItems = menuData.filter(({ category }) =>
    filter ? category === filter : true
  )
  return (
    <>
      <div>
        <select onChange={({ target: { value } }) => setFilter(value)}>
          {filters.map((item) => (
            <option value={item}>{item}</option>
          ))}
        </select>
      </div>
      <div class="menu-items">
        {currentItems.map(({ name }) => (
          <div>{name}</div>
        ))}
      </div>
    </>
  )
}