useState未使用过滤后的数组设置初始状态

Question

我正在使用useContext将数据提取到组件中。然后，我想过滤tasks，使其仅显示项目的相关任务。

我正在将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

Answer 1

我将使用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状态。

Answer 2

您将来是否需要通过listToRender更新setListToRender()？如果不是，则可以改用useMemo：

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