1

我想填充数组状态，但 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]);
4

2 回答 2

1

问题

状态更新在渲染周期之间进行处理，因此尝试记录或使用它只会产生当前渲染周期的值，而不是下一个渲染周期的值。

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不是依赖项，因为它没有在钩子回调中引用。
于 2020-09-17T06:59:24.270 回答
0

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

useEffect(() => {
  setfilteredItems([...projectItems]);
}, [projectItems]);
于 2020-09-17T07:07:38.317 回答