javascript - React：使用 axios 获取 user_id 的数据

Question

我有一个使用反应创建的简单列表，并使用 axios 获取数据，如下所示

https://codesandbox.io/s/old-worker-6k4s6

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import axios from "axios";

export default () => {
  

  const [list, setList] = React.useState([]); 

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
        setList(response.data);
      })
      .catch((err) => console.log(err));
  }, []);
 

  return (
    <div>
    

      <ul>
        <div>
          {list.map((item, index) => (
            <li key={item.id}>
              <div>{item.title}</div>
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};

如您所见，显示了所有标题。例如，我怎样才能显示 only userID= 2 的标题？

标签： javascriptreactjs

Answer 1

您需要像这样更新：

{list.map((item, index) => {
        if (item.userId === 2) {
          return (
            <li key={item.id}>
              <div>{item.title}</div>
            </li>
          );
        }
        return null;
      })}

链接：https ://codesandbox.io/s/peaceful-oskar-x0r5t?file=/src/App.js