Question

我目前正在学习React，并且正在尝试将JSON数据呈现到页面。我使用了map（），但是它只是将数组中的最后一个对象呈现到页面上。

import { on as applicationOn, resumeEvent, ApplicationEventData } from "tns-core-modules/application";

export class BaseComponent {

    constructor() {
        
        applicationOn(resumeEvent, (args: ApplicationEventData) => {
            //set full screen here
        });
     }

}

这是我的Json数据。图片链接太长了，所以我只是添加了一个示例图片，以使其更易于阅读。

class ContentCard extends Component {
  state = {
    products: ProductInfo
  };
  render() {
    console.log(this.state.products);
    return (
      <>
        {this.state.products.map(items => (
          <div className="container page-wrapper">
            <div className="page-inner">
              <div className="row">
                <div className="el-wrapper">
                  <div className="box-up">
                    <img className="img" src={items.img} alt="" />
                    <div className="img-info">
                      <div className="info-inner">
                        <span className="p-name">{items.name}</span>
                        <span className="p-company">{items.company}</span>
                        <span className="price">
                          {items.price.toLocaleString("en-US", {
                            style: "currency",
                            currency: "USD"
                          })}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </>
    );
  }
}

Answer 1

在数组中渲染多个项目时，需要添加一个键。

array.map(item => (
  <div key={item.unique_property}>
    [...]
  </div>
))

另外，您确定要使用React 16.2 +吗？即您是否有必要的Fragment语法支持？

Answer 2

此示例可以为您提供帮助：

import React, { useState, useEffect } from 'react';

const MyPost = () => {
  const [post, setPost] = useState([]);

  useEffect(() => {
    fetch('url')
      .then(res => res.json())
      .then(jsonData => setPost([...jsonData]));
  }, []);

  return (
    <>
      {post.length > 0 ? (
        <ol>
          {post.map(p => (
            <li key={p.replace(/' '/g, '')}>{p}</li>
          ))}
        </ol>
      ) : (
        <h1>No post Available</h1>
      )}
    </>
  );
};

export default MyPost;

为什么map（）仅显示数组中的最后一个对象？

2 个答案: