如何过滤 JavaScript 中嵌套 arrays 中的对象？

Question

如何在 JS 中通过useId获取所有任务？ 当我点击用户名时，我想获取属于该用户的所有待办事项。 如何在 JS 中通过useId获取所有任务？ 当我点击用户名时，我想获取属于该用户的所有待办事项。 如何在 JS 中通过useId获取所有任务？ 当我点击用户名时，我想获取属于该用户的所有待办事项。

"users":[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret"
},
{
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette"
},
{"id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha"
}
],

"todos":[
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 3,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  },
  {
    "userId": 2,
    "id": 3,
    "title": "fugiat veniam minus",
    "completed": false
  },
  {
    "userId": 3,
    "id": 4,
    "title": "et porro tempora",
    "completed": true
  },
  {
    "userId": 2,
    "id": 5,
    "title": "laboriosam mollitia et enim quasi adipisci quia provident illum",
    "completed": false
  },
  {
    "userId": 1,
    "id": 6,
    "title": "qui ullam ratione quibusdam voluptatem quia omnis",
    "completed": false
  }]

import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Link } from "react-router-dom";

function Users({ limit, match }) {
  const [users, setUsers] = useState([]);
  console.log(match);
  useEffect(() => {
    loadUsers();
  }, []);

  const loadUsers = async () => {
    const result = await Axios.get(`http://localhost:3004/users`);
    console.log(result);
    setUsers(result.data);
  };

  return (
    <div>
      {users.slice(0, limit).map((user) => (
        <Link to={`/users/${user.id}`}>
          <h1>{user.title}</h1>
        </Link>
      ))}
    </div>
  );
}

export default Users;


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

function todos({ match }) {
  const [todos, settodos] = useState([]);
  console.log(match);

  useEffect(() => {
    loadtodos();
  }, []);
  const loadtodos = async () => {
    const result = await fetch(
      `http://localhost:3004/todos/${match.params.id}`
    );
    const todos = await result.json();
    settodos(todos);
    console.log(todos);
  };

  return <div>{todos.title}</div>;
}

export default todos;

Answer 1

在这种情况下，ReactJs 和普通 javascript 之间没有区别，您可以简单地对todos数组进行过滤，就像这样

todos.filter(todo => todo.userId === userId)

或者，您可以使用lodash之类的库来提高代码的安全性和可读性。 （在您的示例中，您可以使用lodash.find(todos, todo => todo.userId === userId) 。

我希望这个答案对你有帮助！