时间戳

首页 > 解决方案 > React - 只导入一次 JSON 对象

reactjs - React - 只导入一次 JSON 对象

问题描述

以下简单的 React 组件将 JSON 文件 ( data.js ) 作为对象导入并列出其中的项目。

List.js

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

现在在上面的页面中，如果您单击“更多...”按钮，它会调用另一个名为 Tile.js 的 React 组件作为休闲组件：

Tile.js

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

问题是第二个组件也在导入 JSON 文件（data.js）。如何避免两次导入data.js？通常，编写此应用程序的更好方法是什么？

标签： reactjs

解决方案

导入是缓存的，所以如果你直接返回一个 JSON import jsonResponse from './data'，第一个组件将导入它，而第二个将从导入缓存中获取它；

例如，您可以尝试导出一个类的实例，更改它的一个属性，然后在另一个使用该导入的组件中检查该属性。

该缓存的一个易于选择且非常常见的使用示例是react-boilerplate的configureStore ：它导出存储实例，因此无论导入哪个组件，它将引用同一个存储。

推荐阅读