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 只会运行如果任务发生变化，（请参阅依赖项数组）。因此，当tasks获得一个值时，会触发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]);

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

useState not setting inital state with a filtered array

reactjs

react-hooks

react-state

use-state