如何在反应中传递一个json数组？答案

【问题标题】：How to pass a json array in react?如何在反应中传递一个json数组？
【发布时间】：2019-07-15 03:33:30
【问题描述】：

首先我要明确这一点，我使用 cdn 进行反应，并使用 ajax 从 json 文件中获取详细信息。

所以，我有一个 json 文件 reactjs.json，看起来像...

[
    {
        "e64fl7exv74vi4e99244cec26f4de1f":[ "image_1.jpg","image_2.jpg"]
    }
]

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Image Viewer-Static</title>
  </head>

  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script type="text/babel">
      class FetchDemo extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
          images: []
          };
        }

        componentDidMount() {
          axios.get('reactjs.json').then(res => {
            console.log(res.data);
            this.setState({ images: res.data });
          });
        }

        render() {
          const { images } = this.state;
          return (
            <div>
              {this.state.images.map((images, index) => (
                <PicturesList key={index} apikeys={images.e64fl7exv74vi4e99244cec26f4de1f} />
              ))}
            </div>
          );
        }

      }

      class PicturesList extends React.Component {
        render() {
          return (
            <img src={this.props.apikeys} alt={this.props.apikeys}/>
            
          );
        }
      }
    
      ReactDOM.render(
        <FetchDemo/>,
        document.getElementById("root")
      );
    </script>
  </body>
</html>

我想显示名为 image_1.jpg,image_2.jpg 的图像，但 this.props.apikeys 获取的值类似于 image_1.jpg,image_2.jpg

images

但我希望它给出两个值并显示两个图像。

我尝试了很多来解决这个问题，但失败了。欢迎任何建议和帮助。

【问题讨论】：

您能否提供给我们，您如何从您的链接访问图像？ src 期望公共 URL 有效，例如 http://www.example.com/image.png

标签： reactjs

【解决方案1】：

在我看来，您正在接收此 JSON 休止符，然后将 JSON 对象设置为您的状态。试试看

JSON.parse()

。您还将整个 JSON 对象设置为您的图像数组。您需要选择一个键。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

【讨论】：

我不明白，请您简要介绍一下。我只想得到两个单独的值，以便屏幕上出现两个图像@Denial

【解决方案2】：

因为您已经在文件结构中拥有了 json 文件，您可以直接导入并使用它..

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import reactjsJSON from "./reactjs.json";

class FetchDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      images: reactjsJSON
    };
  }

** 编辑：**

您的 html 文件

<!DOCTYPE html>
<html>
  <head>
    <title>Image Viewer-Static</title>
  </head>

  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script type="text/babel">
        class FetchDemo extends React.Component {
          constructor(props) {
            super(props);

            this.state = {
            images: []
            };
          }

          componentDidMount() {
            axios.get('/reactjs.json').then(res => {
              console.log(res.data);
              this.setState({ images: res.data });
            });
          }

          render() {
            const { images } = this.state;
            return (
              <div>
                {    this.state.images.map(imageObjs =>
        Object.keys(imageObjs).map(key =>
          imageObjs[key].map((image, index) => (
            <PicturesList key={index} apikeys={image} />
          ))
        )
      )}
              </div>
            );
          }

        }

        class PicturesList extends React.Component {
          render() {
            console.log(this.props)
            return (
              <img src={this.props.apikeys} alt={this.props.apikeys}/>

            );
          }
        }

        ReactDOM.render(
          <FetchDemo/>,
          document.getElementById("root")
        );
    </script>
  </body>
</html>

您的 JSON，已针对所有可能性进行了测试，已替换为虚拟图像

[
  {
    "e64fl7exv74vi4e99244cec26f4de1f": [
      "https://picsum.photos/200?image=2",
      "https://picsum.photos/200?image=2"
    ],
    "e64fl7exv74vi4e99244cec26f4deop": [
      "https://picsum.photos/200?image=2",
      "https://picsum.photos/200?image=2"
    ]
  },
  
  {
    "e64fl7exv74vi4e99244cec26f4de1g": [
      "https://picsum.photos/200?image=2",
      "https://picsum.photos/200?image=2"
    ]
  }
]

在同一个 http 服务器中提供这两个文件并检查输出......因为这两个文件都是从同一个服务器提供的，所以你可以添加“./”路径来获取和获取 JSON 数据......

【讨论】：

我使用的是cdn，如何导入json文件？@varun
您是否从外部 API 获取 JSON 数据？
stackoverflow.com/a/45424256/9265743 检查此链接以使用 javascript 添加 json
我有一个文件名 reactjs.json 我用来获取数据@Varun

【解决方案3】：

在这里，您将数组 [ "image_1.jpg","image_2.jpg"] 设置为 apiKeys in

   <PicturesList key={index} apikeys={images.e64fl7exv74vi4e99244cec26f4de1f} />

所以当你尝试在此处设置图像 src 时

  <img src={this.props.apikeys} alt={this.props.apikeys}/>

您在 src 中设置为 this.props.apikeys 的是一个数组。您必须分别处理数组中的两个图像，以将每个图像的来源设置为字符串。尝试如下。

        {this.props.apikeys.map((image, index) => (
            <img src={image} alt={image}/>
          ))}

【讨论】：

【解决方案4】：

我在codesandbox中写了一个demo：https://codesandbox.io/s/oorn5o162q，你可以看看。

我在json中使用了两个真实的图片url，并细化了你的组件代码。

【讨论】：