时间戳

首页 > 解决方案 > 状态未从其他函数中定义

reactjs - 状态未从其他函数中定义

问题描述

我正在尝试从 updateScoreHandler 获取 eventsData。我不明白，为什么当我输入输入时，控制台中显示未定义（初始状态）。在控制台中，它开始显示：更改未定义，之后：更改{元素：数组（2），数据：数组（2）}（正确数据）

    const [eventsData, setEventsData] = useState<{
       elements: JSX.Element[];
       data: { id: string; home?: number; away?: number }[];
    }>();

    useEffect(() => {
       loadEvents();
    }, []);

    useEffect(() => {
       console.log('hook', eventsData);
    }, [eventsData]);



   const loadEvents = async () => {
       const res = await axios.get(BACKEND_URL + '/events');
       const events = res.data.map((event: MatchType) => (
           <input type="number" onChange={(e) => updateScoreHandler()} />
       )

    setEventsData({ elements: events, data: res.data });
   };

    const updateScoreHandler = () => {
    console.log(id, value, target, eventsData);
    };

标签： reactjsreact-hooks

解决方案

首先，不要将 JSX 元素存储在状态中，您可能会遇到过时的范围问题或其他问题，即在将输入存储在状态时 updateScoreHandler 将 eventsData 为 undefined

尝试类似的东西 -

const loadEvents = async () => {
    const res = await axios.get(BACKEND_URL + '/events');
    setEvents(res.data);
};

然后

const updateScoreHandler = (event) => {
    // do something with event?
};

...

return (
   ...

   {events.map(event => (
       <input type="number" onChange={(e) => updateScoreHandler(event)} />
    ))}

   ...
)

推荐阅读