React 组件无法从本地 JSON 文件中获取数据

Question

The following code was working when the const url data was being used and passed in the fetch. I created a Json local file with a different array passed in fetch and now it is not working. Should I re-phrase my code now that it is local and from a URL? The console says "Uncaught Error: Too many re-renders. React"

import React, { useState } from 'react'
import { FaAngleDoubleRight } from 'react-icons/fa'
import data from './data.json'

function App() {
  const [jobs, setJobs] = useState(data)
  const [value, setValue] = useState(0)
  const newJobs = data
  setJobs(newJobs)
  
  const { company, dates, duties, title } = jobs[value]
  return (
    <section className="section">
      <div className="title">
        <h2>experience</h2>
        <div className="underline"></div>
      </div>
      <div className="jobs-center">
        {/* btn container */}
        <div className="btn-container">
          {jobs.map((item, index) => {
            return (
              <button
                key={item.id}
                onClick={() => setValue(index)}
                className={`job-btn ${index === value && 'active-btn'}`}
              >
                {item.company}
              </button>
            )
          })}
        </div>
        {/* job info */}
        <article className="job-info">
          <h3>{title}</h3>
          <h4>{company}</h4>
          <p className="job-date">{dates}</p>
          {duties.map((duty, index) => {
            return (
              <div key={index} className="job-desc">
                <FaAngleDoubleRight className="job-icon"></FaAngleDoubleRight>
                <p>{duty}</p>
              </div>
            )
          })}
        </article>
      </div>
      <button type="button" className="btn">
        more info
      </button>
    </section>
  )
}

export default App;

    enter code here

Answer 1

If data is really just JSON data:

import data from './data.json'

Then this makes no sense:

const reponse = await fetch(data)

What are you fetching ? The data that's already in data ? This is most certainly failing and there's an error in your browser's development console. ( Always check for errors first.)

If you already have the data then you can remove the fetch operation, which means you can remove the useEffect entirely, and remove the loading state entirely. Just use data as the start of your state:

const [jobs, setJobs] = useState(data);

In fact, if you don't ever modify this data and it's always statically displayed then you don't even need the jobs state either. Just use data in your render.