为什么我可以 console.log 一个变量，但它不能在过滤器中使用

Question

我正在尝试创建一个React.js 博客，所以我有一个easybase.io 数据库来保存我的博客的数据。有一个显示所有帖子的页面，当有人点击帖子时，使用 react-router-dom 包中的 paramas 模块发送帖子 ID。在执行console.log(postid) 时，它显示在控制台中，但是当它通过过滤器时，由于某种原因它不起作用，有什么解释吗？过滤器正在过滤从数据库中选择的所有帖子，并且只返回具有相同 id 的对象。当输入task.id === 1 时，它会返回ID 为1 的对象，但是当在控制台中输入task.id === postid 和postid 等于1 时，它什么也不返回。

所有帖子代码

/* eslint-disable */

import { useEasybase } from "easybase-react";

import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";

export default function BlogPosts() {
  let history = useHistory();
  const { db } = useEasybase();

  const [responseData, setResponse] = useState([]);

  async function getPosts() {
    const ebData = await db("POSTS").return().all();
    setResponse(ebData);
  }

  useEffect(() => {
    getPosts();
  }, []);

  return (
    <>
      <div>
        {responseData.map((val, key) => {
          return (
            <div
              style={{ border: "1px solid black", margin: "1em 1em" }}
              key={key}
              onClick={() => {
                history.push(`/post/${val.id}`);
              }}
            >
              <h3>{val.title}</h3>
              <div dangerouslySetInnerHTML={{ __html: val.post_text }} />
            </div>
          );
        })}
      </div>
    </>
  );
}

打开邮政编码

/* eslint-disable */
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { useEasybase } from "easybase-react";

export default function BlogPosts() {
//testing for the filter function  
const tasks = [
    {
      taskId: 1,
      taskName: "Clean the bathroom",
      taskStatus: "Complete",
    },
    {
      taskId: 2,
      taskName: "Learn filtering data in React",
      taskStatus: "To do",
    },
    {
      taskId: 3,
      taskName: "Fix the bug on React project",
      taskStatus: "To do",
    },
    {
      taskId: 4,
      taskName: "Fix the car",
      taskStatus: "Complete",
    },
  ];

  const [responseData, setResponse] = useState([]);
  const [idState, setIdState] = useState(0);

  let { postid } = useParams();

  const { db } = useEasybase();

  async function getPosts() {
    const ebData = await db("POSTS").return().all();
    setResponse(ebData);
    console.log(ebData);
  }

  useEffect(() => {
    getPosts();
    setIdState(postid);
    console.log(postid);
  }, []);

  return (
    <>
      <div style={{ justifyContent: "center", alignContent: "center" }}>
        {tasks
          .filter((task) => task.taskStatus === "To do")
          .map((task) => (
            <li key={task.taskId}>{task.taskName}</li>
          ))}
        {responseData
          .filter((task) => task.id === postid)
          .map((task) => (
            <li key={task.id}>{task.title}</li>
          ))}
      </div>
    </>
  );
}

Answer 1

最可能的原因是路由参数中的postid 是一个字符串（毕竟它来自的URL 是一个字符串），而您的task.id 是一个数字，如您的代码所示。

比较'1' === 1时，总是会因为类型不同而失败。要么使用==，或者更好，首先将路由参数（postid）转换为数字。