React JSON - 在卡片滑块中显示数据答案

【问题标题】：React JSON - Display data in a Card SliderReact JSON - 在卡片滑块中显示数据
【发布时间】：2019-02-21 04:01:06
【问题描述】：

我有一个已转换为 Javascript 的本地 JSON 文件。

我可以通过将 JS 文件导入我的 App.js 来获取数据。

这是我的 App.js 文件：

import React, { Component } from "react";
import CardData from "./data/db";
import "./App.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      CardData
    };
  }

  render() {
    return (
      <div>
        {this.state.CardData.map(cards => (
          <div className="card">
            <span>{cards.title}</span>
            <br />
            <span>{cards.subtitle}</span>
            <br />
          </div>
        ))}
      </div>
    );
  }
}

export default App;

我希望能够显示 3 张卡片，然后可以选择滑过剩余的卡片。

类似的东西

但是我只能在一个 div 中显示它，有没有办法以我调用 JSON 的方式来实现，或者有没有办法通过它们的 ID 分隔 JSON 数据？

【问题讨论】：

为什么需要通过 id 来分隔 JSON 数据？您能否具体说明一下您想要的最终结果是什么？根据显示 cardData 中的所有项目将与上述代码一起使用。但是，几乎没有什么改进，例如将您的 JSON 数据放入 .json 文件中并像您导入的方式一样导入它，但您需要指定文件扩展名。其次使用
标签而不是带有
的。
我不需要将它们分开，我只是问这样做是否更简单。我的最终结果将是相同的。就像我在上面的图片中显示的那样。我只是在测试时添加了
以查看数据是否被提取。这不会是我的最终代码
这段代码可以循环显示你的cardData里面的所有卡片。

标签： json reactjs

【解决方案1】：

由于您正在寻找一种更简单的方法来实现相同的结果，我建议您将您的 App 切换为无状态组件，因为它永远不会更新/使用任何状态值：

import React from "react";
import CardData from "./data/db";
import "./App.css";

const App = props => (
    <React.Fragment> //A fragment will not appear in your DOM
        {CardData.map(({ title, subtitle }, index) => ( //Deconstructs each cards
            <div className="card" key={index}>
                <span>{title}</span>
                <br />
                <span>{subtitle}</span>
                <br />
            </div>
        ))}
    </React.Fragment>
)

export default App;

但是这个组件永远不能渲染这个特定的 JSON 文件，如果你想让它更通用，你应该通过组件的 props 发送你的数据：

import React from "react";
import "./App.css";

const App = ({ cards }) => (
    <React.Fragment>
        {cards.map(({ title, subtitle }, index) => (
            <div className="card" key={index}>
                <span>{title}</span>
                <br />
                <span>{subtitle}</span>
                <br />
            </div>
        ))}
    </React.Fragment>
)

export default App;

在你的父组件中：

import CardData from "./data/db";

const Parent = props => <App cards={CardData}/>

映射元素时也不要忘记keys，因为每个映射的组件都应该有一个唯一且持久的键。

【讨论】：