如何根据使用状态创建的状态显示过滤列表？

Question

我有一些代码in codesandbox，它由 4 个 div 组成，2 个属于“书籍”类别，2 个属于“文章”类别。如果应显示所有 div、仅显示书籍或仅显示文章，则顶部的某些按钮应触发。所有按钮都显示当前的每个 div，所以页面没有变化，看起来状态保持不变

---

这是沙盒上的代码

App.js

import React, { useState } from "react";
/* import Container from './design/Container' */

import Test from "./Test";
const posts = [
  {
    title: "React Hooks",
    content: "The greatest thing since sliced bread!",
    category: "Book"
  },
  {
    title: "Using React Fragments",
    content: "Keeping the DOM tree clean!",
    category: "Article"
  },
  {
    title: "Angular Hooks",
    content: "The greatest thing since sliced bread!",
    category: "Book"
  },
  {
    title: "Angular Fragments",
    content: "Keeping the DOM tree clean!",
    category: "Article"
  }
];
export default function App() {
  const [productItems, setProductItems] = useState(posts);

  function handleButton(e) {
    console.log(e.target.value);
    if (e.target.value === "All") {
      setProductItems(posts);
    } else {
      setProductItems(
        posts.filter((p, i) => <div key={i}>p.category === e.target.value</div>)
      );
    }

    setProductItems(posts);

    console.log(productItems);
  }
  return (
    <div>
      <Test posts={productItems} handleButton={handleButton} />
    </div>
  );
}

Test.js

import React from "react";

function Post({ p,title, content, category }) {
  return (
    <React.Fragment>
      
      <div>
        <h3>{p.title}</h3>
        <div>{p.content}</div>
        <br />
        <i>
          in <b>{p.category}</b>
        </i>
      </div>
    </React.Fragment>
  );
}
export default function Test({handleButton, posts = [] }) {
  return (
    <React.Fragment>
      <div>
        <button value="All" onClick={handleButton}>
          All
        </button>
        <button value="Book" onClick={handleButton}>
          Book
        </button>
        <button value="Article" onClick={handleButton}>
          Article
        </button>
      </div>

      <div>
        {posts.map((p) => {
          return <Post key={p.title} p={p} />;
        })}
      </div>
    </React.Fragment>
  );
}

style.scss

.App {
  font-family: sans-serif;
  text-align: center;
}

Answer 1

您有一些错误，其中一个是您的 handleButton 需要一个参数，但您没有将一个参数传递给它。您需要像onClick={(e) => handleButton(e)} 一样调用它，另一个是您在 if 语句之后再次设置产品项目的状态。您已经将其设置为过滤后的值，但随后您使用未过滤的值（如 setProductItems(posts);）覆盖了它，因此您必须删除此行。另一个是您的过滤器功能没有真正意义。我会查找并了解更多信息。它需要一个返回布尔值的函数；它不返回 div。

---

解决方案 (sandbox)

App.js

import React, { useState } from "react";
import Test from "./Test";

const posts = [
  {
    title: "React Hooks",
    content: "The greatest thing since sliced bread!",
    category: "Book"
  },
  {
    title: "Using React Fragments",
    content: "Keeping the DOM tree clean!",
    category: "Article"
  },
  {
    title: "Angular Hooks",
    content: "The greatest thing since sliced bread!",
    category: "Book"
  },
  {
    title: "Angular Fragments",
    content: "Keeping the DOM tree clean!",
    category: "Article"
  }
];

export default function App() {
  const [productItems, setProductItems] = useState(posts);

  function handleButton(e) {
    console.log(e.target.value);
    if (e.target.value === "All") {
      setProductItems(posts);
    } else {
      setProductItems(posts.filter((p) => p.category === e.target.value));
    }

    console.log(productItems);
  }
  return (
    <div>
      <Test posts={productItems} handleButton={handleButton} />
    </div>
  );
}

Test.js

import React from "react";

const Post = ({ pa }) => {
  return (
    <React.Fragment>
      <div>
        <h3>{pa.title}</h3>
        <div>{pa.content}</div>

        <i>
          in <b>{pa.category}</b>
        </i>
      </div>
    </React.Fragment>
  );
};

export default ({ posts = [], handleButton }) => (
  <>
    <div>
      <button value="All" onClick={(e) => handleButton(e)}>
        All
      </button>
      <button value="Book" onClick={(e) => handleButton(e)}>
        Book
      </button>
      <button value="Article" onClick={(e) => handleButton(e)}>
        Article
      </button>
    </div>

    <div>
      {posts.map((pa, i) => (
        <Post key={i} pa={pa} />
      ))}
    </div>
  

</>
);