在 React 中使用 useReducer 钩子过滤列表？答案

【问题标题】：filter a list with useReducer hook in React?在 React 中使用 useReducer 钩子过滤列表？
【发布时间】：2022-01-17 02:29:10
【问题描述】：

我需要知道如何使用 useReducer 函数以列表的形式过滤对象。我希望它根据对象的进度工作。我是新人，我也需要映射一些东西吗？

const data = {
  title: "Title",
  lessons: [
    {
      title: "Introduction",
      data: Lesson1,
      isComplete: false,
      progress: 0,
    },
    {
      title: "Section",
      data: Lesson2,
      isComplete: false,
      progress: 10,
    },
    {
      title: "Review",
      data: Lesson3,
      isComplete: false,
      progress: 0,
    },
  ],
};

const [state, dispatch] = useReducer(reducer, data.lessons);

  function reducer(state, action) {
    switch (action.type) {
      case "all":
        return { ...state.filter((filterlesson) => filterlesson >= 0) };
      case "viewed":
        return { ...state.filter((filterlesson) => filterlesson != 0) };
      case "notviewed":
        return { ...state.filter((filterlesson) => filterlesson == 0) };
      default:
        return state;
    }
  }

const Filter = () => {
    return (
      <>
        <div className={styles.filter}>
          <button onClick={() => dispatch({ type: "all" })}>All</button>
          <button onClick={() => dispatch({ type: "viewed" })}>Viewed</button>
          <button onClick={() => dispatch({ type: "notviewed" })}>Not Viewed</button>
        </div>
      </>
    );
  };

return (
    <Fragment>
        <Filter />
        {state}
    </Fragment>
  );

我之前尝试过，但认为应该使用 useReducer ：

        {data.lessons
            .filter((l) => l.progress === 0)
            .map((filterLesson, i) => (
              <li key={i}></li>
            ))}

【问题讨论】：

标签： reactjs filter state dispatch use-reducer

【解决方案1】：

不确定这是否是正确的方法，但这是我在没有 useReducer 的情况下提出的一种方法。欢迎任何优化！

const [filterState, setfilterState] = useState(data.lessons);

  const allLessons = useMemo(() => {
    return data.lessons.filter((less) => less.progress >= 0);
  });
  const viewedLessons = useMemo(() => {
    return data.lessons.filter((less) => less.progress != 0);
  });
  const notViewedLessons = useMemo(() => {
    return data.lessons.filter((less) => less.progress == 0);
  });

 const Filter = () => {
    return ( 
       <div >
          <button
            onclick={() => {
              setfilterState(allLessons);
            }}
          >
            All Lessons
          </button>
          <button
            onclick={() => {
              setfilterState(viewedLessons);
            }}
          >
            Viewed
          </button>
          <button size="1em" onclick={() => {
              setfilterState(notViewedLessons);
            }}
          >
            Not Viewed
          </button>
        </div>
)
};

 const List = () => {
    return (
      <Fragment>
        <div className={styles.list}>
          {filterState.map((item, i) => (
            <li key={i}>{item}</li>
          ))}
      </Fragment>
    );
  };

return (
    <Fragment>
        <Filter />
        <List />
    </Fragment>
  );

【讨论】：