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)

有人知道我在哪里可能会出错吗？

这是组件首次渲染时不同值的控制台日志

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

以后需要setListToRender()更新listToRender吗？如果你不是，那么你可以改用useMemo：

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