React:即使数据可以访问，props.filter也不起作用

Question

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

我可以访问这些道具——我已经在返回中对道具进行了JSON.stringing，它可以正确地显示数据。

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;

TaskList.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 (

Answer 1

您应该将useState中的tasks定义为如下数组：

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,
}
]);

Answer 2

不能在react中绑定对象。但你必须通过地图。

props.tasks.map(task=> <li className={task.active ? 'active' : 'done'}>{task}</li>)

此外，状态应该在数组中。修复那个打字错误。