问React只导入JSON对象一次

EN

import React from 'react'
import jsonResponse from './data'


function ZooList ({ setID }) {
  const setURL = (e) => {
    window.history.pushState(null, null, '/' + e)
    setID(e)
  }

  const list = jsonResponse.animals.map((item) => {
    return (
      <li key={item.id}>
        <div>
          <img
            src={item.image_url}
            alt={item.name}
            onClick={() => setID(item.id)}
          />
          <h3>{item.name}</h3>
          <p>
            <b>Distribution</b>: {item.distribution}
          </p>
          <button onClick={() => setURL(item.id)}>More...</button>
        </div>
      </li>
    )
  })

  return (
    <ul>
      {list}
    </ul>
  )
}

export default List

import React from 'react'
import jsonResponse from './data'

function Tile ({ setID, newID }) {
  const clearURL = (e) => {
    window.history.pushState(null, null, '/')
    setID(null)
  }

  return (
    <div>
      <div>
        <img
          src={jsonResponse.animals[newID].image_url}
          alt={jsonResponse.animals[newID].name}
        />
        <h2>{jsonResponse.animals[newID].name}</h2>
        <p><b>Distribution</b>: {jsonResponse.animals[newID].distribution}</p>
        <StyledParagraph>{jsonResponse.animals[newID].details.long}</StyledParagraph>

        <button onClick={() => clearURL(null)}>Back to overview</button>
      </div>
    </div>
  )
}

export default Tile