如何重复过滤数组？

Question

所以，现在我正在制作待办事项列表，但按钮“活动”和“完成”任务有问题。当我按下其中一个按钮时，它必须返回已完成/活动的任务，它会返回，但只有 1 次。我猜它会创建一个新数组，并删除旧数组。那么如何制作过滤器，它不会删除我的数组，只过滤已完成或活动的任务？每次我点击这些按钮时，我都会看到按完成/活动/全部过滤的任务。

Answer 1

这是一个如何存储本地状态并将其作为 props.done 传递给 ConnectedList 的示例。ConnectedList 将 selectFilteredTasks 设置为 mapStateToProps，这是一个使用reselect创建的选择器来获取任务，此函数的第二个参数是 props，因此如果 props.done 未定义，它将过滤掉已完成的任务。const { useState } = React;const {&nbsp; Provider,&nbsp; connect,} = ReactRedux;const { createStore } = Redux;const { createSelector } = Reselect;const state = {&nbsp; tasks: [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; task: 'one',&nbsp; &nbsp; &nbsp; status: false,&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; task: 'two',&nbsp; &nbsp; &nbsp; status: true,&nbsp; &nbsp; },&nbsp; ],};const store = createStore(&nbsp; (x) => x, //won't dispatch any actions&nbsp; { ...state },&nbsp; window.__REDUX_DEVTOOLS_EXTENSION__ &&&nbsp; &nbsp; window.__REDUX_DEVTOOLS_EXTENSION__());//selectorsconst selectTasks = (state) => state.tasks;const selectFilteredTasks = createSelector(&nbsp; selectTasks,&nbsp; (_, { done }) => done, //get the second argument passed to selectFilteredTasks&nbsp; (tasks, done) =>&nbsp; &nbsp; done !== undefined&nbsp; &nbsp; &nbsp; ? {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tasks: tasks.filter(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (task) => task.status === done&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; : { tasks });const List = ({ tasks }) => (&nbsp; <ul>&nbsp; &nbsp; {tasks.map((task) => (&nbsp; &nbsp; &nbsp; <li key={task.id}>&nbsp; &nbsp; &nbsp; &nbsp; <pre>{JSON.stringify(task)}</pre>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; ))}&nbsp; </ul>);const ConnectedList = connect(selectFilteredTasks)(List);const App = () => {&nbsp; const [done, setDone] = useState();&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; only done&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => setDone(done ? undefined : true)}&nbsp; &nbsp; &nbsp; &nbsp; ></input>&nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; <ConnectedList done={done} />&nbsp; &nbsp; </div>&nbsp; );};ReactDOM.render(&nbsp; <Provider store={store}>&nbsp; &nbsp; <App />&nbsp; </Provider>,&nbsp; document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script><div id="root"></div>

Answer 2

我建议你采用不同的方法。在按钮单击功能中，您可以获取所有待办事项并返回过滤出的活动/已完成的待办事项，而不是对减速器执行操作。