Reactjs useState未使用筛选数组设置初始状态

我正在使用

useContext

将数据拉入我的组件。然后我想过滤

任务

，这样它只显示项目的相关任务

我正在将

tasks

筛选到

initState

中，然后想使用此筛选列表的useState设置初始状态

当我在

initState

中过滤列表时，我得到了正确的值，但是当我这样做时：

const[listToRender，setListToRender]=useState（initState）

listToRender

是一个空数组，组件中没有状态

    const TasksTable = ({ match: { params: { projectId }} }) => {
    const { tasks } = useContext(TasksContext)
    const initState = [...tasks].filter(task => task.taskProject === projectId)
    const [listToRender, setListToRender] = useState(initState)

有人知道我哪里会出错吗

下面是组件首次呈现时不同值的console.log

---

我将使用useEffect初始化listToRender状态的值

 const TasksTable = ({ match: { params: { projectId }} }) => {
 const { tasks } = useContext(TasksContext)
 const [listToRender, setListToRender] = useState([])

React.useEffect(() => {
const initState = tasks?.filter(task => task.taskProject === projectId) ?? []
 setListToRender(initState)
}, [tasks, projectId]);

原因是，它在设置listToRender状态时可能没有任务数据，导致它成为空数组

---

每次组件获得更新时都会运行useEffect，在这种情况下，useEffect仅在任务更改时运行（请参见依赖关系数组）。因此，当任务获得一个值时，它将触发useEffect来更新listToRender状态。

我将使用useEffect来初始化listToRender状态的值

 const TasksTable = ({ match: { params: { projectId }} }) => {
 const { tasks } = useContext(TasksContext)
 const [listToRender, setListToRender] = useState([])

React.useEffect(() => {
const initState = tasks?.filter(task => task.taskProject === projectId) ?? []
 setListToRender(initState)
}, [tasks, projectId]);

原因是，它在设置listToRender状态时可能没有任务数据，导致它成为空数组

---

每次组件获得更新时都会运行useEffect，在这种情况下，useEffect仅在任务更改时运行（请参见依赖关系数组）。因此，当任务获得一个值时，它将触发useEffect来更新listToRender状态。

您将来是否需要通过

setListToRender（）

更新

listToRender

？如果您不是，那么您可以使用

usemo

：

const TasksTable = ({ match: { params: { projectId }} }) => {
  const { tasks } = useContext(TasksContext);
  
  const initState = useMemo(() => {
    return tasks.filter(task => task.taskProject === projectId);
  }, [projectId, tasks]);

---

您将来是否需要通过

setListToRender（）

更新

listToRender

？如果您不是，那么您可以使用

usemo

：

const TasksTable = ({ match: { params: { projectId }} }) => {
  const { tasks } = useContext(TasksContext);
  
  const initState = useMemo(() => {
    return tasks.filter(task => task.taskProject === projectId);
  }, [projectId, tasks]);

---

如果其中的示例代码很好。如果其中的示例代码很好。很好，这就解决了它。你介不介意帮我理解为什么这样做？为什么在组件加载时运行的

useffect

中会起作用，但在它之外不起作用？而且您不需要通过

[…tasks]

复制

任务，因为方法
筛选器
返回一个新数组。在这种情况下，每次组件得到更新时都会运行useffect，useEffect仅在任务更改时运行（请参见依赖项数组）。因此，当任务获得值时，它将触发useEffect以更新listToRender状态。：）太好了，这就解决了。你介不介意帮我理解为什么这样做？为什么在组件加载时运行的
useffect
中会起作用，但在它之外不起作用？而且您不需要通过
[…tasks]
复制
任务，因为方法
筛选器
返回一个新数组。在这种情况下，每次组件得到更新时都会运行useffect，useEffect仅在任务更改时运行（请参见依赖项数组）。因此，当任务获得值时，它将触发useEffect以更新listToRender状态。：）是的，我想稍后根据用户选择的其他过滤器更新
listToRender
——谢谢！是的，我想稍后根据用户选择的其他过滤器更新
listToRender
——谢谢！