React 数组状态未更新

Question

我想同时填充数组状态，但 projectItems 不会在 useState 中更新，当我放置 projectItems 时，组件会重新呈现。所以，我正在使用 useCallback，但是当我将 filteredItems 和 projectItems 作为依赖项数组放入 useCallback 并将回调放入 useState 时，useCallback 永远不会运行。

const [filteredItems, setfilteredItems] = useState([]);
const [projectItems, setProjectItems] = useState([]);

const { projects } = props;


const callback = useCallback(() => {
        console.log('callback');
        const projectData = projects.map(i => {
            return (
                {
                    key: '1',
                    projectName: i.project_name,
                    size: i.size,
                    location: i.location,
                    status: `Day ${i.Finished_events_days}/${i.total_days_needed}`,
                    score: `${i.score}/10`,
                    view: <a>View Project</a>,
                    download: <a>Download</a>,
                    feedback: <a>Feedback</a>,
                    audit: <a>Audit</a>
                })
        });

        setProjectItems(prevState => [...prevState, ...projectData]);
        console.log(projectItems);
        setfilteredItems([...projectItems]);
    }, [projectItems, filteredItems]);

    useEffect(() => {

    }, [callback]);

Answer 1

问题

状态更新是在渲染周期之间处理的，因此尝试记录或使用它只会产生来自 current 渲染周期的值，而不是在下一个渲染周期中的样子。

setProjectItems(prevState => [...prevState, ...projectData]);
console.log(projectItems); // <-- current state!
setfilteredItems([...projectItems]); // <-- current state!

解决方案

使用效果挂钩对 projectItems 状态更新做出“反应”以触发 filteredItems 更新。

...
setProjectItems(prevState => [...prevState, ...projectData]);

...

useEffect(() => {
  console.log(projectItems); // <-- updated state!
  setfilteredItems([...projectItems]); // <-- updated state!
}, [projectItems]);

备注：

除非 callback 实际上被传递给子组件，否则我认为没有必要记忆它。
我不认为 projectItems 应该是一个依赖项，因为挂钩回调函数会更新它。
filteredItems 不是依赖项，因为它未在挂钩回调中引用。

Answer 2

您可以使用 useEffect 方法来更新对数组的更改。

useEffect(() => {
  setfilteredItems([...projectItems]);
}, [projectItems]);

React 数组状态未更新

React array state is not updating

reactjs

react-router-component

react-redux

react-hooks

问题

解决方案