javascript - json 操作使用 react js

Question

我有这样的json。

我正在使用 React，我想向有文章的用户展示。

app.js.

import React from "react";
import "./styles.css";
import Post from "./post";

export default function App() {
  return (
    <div className="App">
      <Post />
      
    </div>
  );
}

post.js

import React from "react";
import Data from "./data/data.json" ;


export default function post() {
  return (
        
    <div clasName = "post">
      {Data.map(post=>{
        return <div>
          <h1>{post.username} </h1>   
                     
          </div>
      })}
    </div>
  );
}

我只想使用 显示用户名map()。如何过滤 json 数据，例如谁有文章或谁在 2020 年有文章。

标签： javascriptjsonreactjs

Answer 1

你可以做Array#filter

Data.filter(a=> a.articles.length > 0).map(...

反应

import React from "react";
import Data from "./data/data.json" ;


export default function post() {
  return (
        
    <div clasName = "post">
      {Data.filter(a=> a.articles.length > 0).map(post=>{
        return <div>
          <h1>{post.username} </h1>   
                     
          </div>
      })}
    </div>
  );
}