如何重复过滤数组？

Question

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

Answer 1

这是一个如何存储本地状态并将其作为 props.done 传递给 ConnectedList 的示例。

ConnectedList 将 selectFilteredTasks 设置为 mapStateToProps，这是一个使用reselect创建的选择器来获取任务，此函数的第二个参数是 props，因此如果 props.done 未定义，它将过滤掉已完成的任务。

const { useState } = React;

const {

  Provider,

  connect,

} = ReactRedux;

const { createStore } = Redux;

const { createSelector } = Reselect;

const state = {

  tasks: [

    {

      id: 1,

      task: 'one',

      status: false,

    },

    {

      id: 2,

      task: 'two',

      status: true,

    },

  ],

};

const store = createStore(

  (x) => x, //won't dispatch any actions

  { ...state },

  window.__REDUX_DEVTOOLS_EXTENSION__ &&

    window.__REDUX_DEVTOOLS_EXTENSION__()

);

//selectors

const selectTasks = (state) => state.tasks;

const selectFilteredTasks = createSelector(

  selectTasks,

  (_, { done }) => done, //get the second argument passed to selectFilteredTasks

  (tasks, done) =>

    done !== undefined

      ? {

          tasks: tasks.filter(

            (task) => task.status === done

          ),

        }

      : { tasks }

);

const List = ({ tasks }) => (

  <ul>

    {tasks.map((task) => (

      <li key={task.id}>

        <pre>{JSON.stringify(task)}</pre>

      </li>

    ))}

  </ul>

);

const ConnectedList = connect(selectFilteredTasks)(List);

const App = () => {

  const [done, setDone] = useState();

  return (

    <div>

      <label>

        only done

        <input

          type="checkbox"

          onClick={() => setDone(done ? undefined : true)}

        ></input>

      </label>

      <ConnectedList done={done} />

    </div>

  );

};

ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  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

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