Der Status des React-Arrays wird nicht aktualisiert

Question

Ich möchte sowohl den Array-Status auffüllen, aber projectItems wird in useState nicht aktualisiert, und wenn ich projectItems platziere, wird die Komponente neu gerendert. Ich verwende also usecallback, aber wenn ich filteredItems und projectItems als Abhängigkeitsarray in useCallback und callback in useState einsetze, wird useCallback nie ausgeführt.

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

Problem

Statusaktualisierungen verarbeitet werden zwischen den Zyklen zu machen, so versuchen , es zu protokollieren oder verwenden Sie nur den Wert aus dem Ertrag aktuellen Zyklus macht, nicht das, was es sein wird im nächsten Zyklus machen.

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

Lösung

Verwenden Sie einen Effekt-Hook, um auf die Statusaktualisierung zu "reagieren" und projectItemseine filteredItemsAktualisierung auszulösen .

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

...

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

Anmerkungen:

• Ich denke nicht, dass es notwendig ist, sie auswendig zu lernen, es sei denn, sie callbackwird tatsächlich an eine untergeordnete Komponente übergeben.
• Ich denke nicht, dass projectItemses eine Abhängigkeit sein sollte, da die Hook-Rückruffunktion sie aktualisiert.
• filteredItems ist keine Abhängigkeit, da im Hook-Rückruf nicht darauf verwiesen wird.

Answer 2

Sie können eine useEffectMethode verwenden, um die Änderungen am Array zu aktualisieren.

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