javascript - 反应：即使数据可以访问，props.filter 也不起作用

Question

为什么 TaskList 组件中的 props.tasks.filter 不起作用并导致错误？

我能够访问道具 - 我已经 JSON.stringified 返回中的道具并正确显示数据。

import React, { Component, useState } from 'react';
import './App.css';
import AddTask from '../src/components/AddTask';
import TaskList from '../src/components/TaskList';

const App = () => {
  const [tasks, setTasks] = useState(
    {
      name: 'Example 1',
      id: 1,
      important: true,
      targetDate: '2021-07-16',
      active: true,
    },
    {
      name: 'Example 2',
      id: 2,
      important: false,
      targetDate: '2021-06-03',
      active: false,
    }
  );

  return (
    <div className="App">
      <AddTask />
      <TaskList tasks={tasks} />
      <h1 style={{ color: 'red' }}>Test</h1>
    </div>
  );
};

export default App;

任务列表.js

import React from 'react';
import Task from './Task';

const TaskList = (props) => {
  const active = props.tasks.filter((task) => task.active);
  const done = props.tasks.filter((task) => !task.active);

  return (
    <>
      <ul>{JSON.stringify(props.tasks)}</ul>
    </>
  );
};

export default TaskList;

我收到的错误消息：

TypeError: props.tasks.filter is not a function
  2 | import Task from './Task';
  3 | 
  4 | const TaskList = (props) => {
> 5 |   const active = props.tasks.filter((task) => task.active);
  6 |   const done = props.tasks.filter((task) => !task.active);
  7 | 
  8 |   return (

标签： javascriptreactjs

Answer 1

您应该像这样tasks在useStateas 数组中定义：

const [tasks, setTasks] = useState([
{
  name: 'Example 1',
  id: 1,
  important: true,
  targetDate: '2021-07-16',
  active: true,
},
{
  name: 'Example 2',
  id: 2,
  important: false,
  targetDate: '2021-06-03',
  active: false,
}
]);