ReactJS中fetch请求返回数据后无法更新state状态变量问题求助

• 状态类型错误：你初始化events时用了对象类型useState({})，但push是数组的原生方法，无法在对象上执行，这一步本身就会抛出语法错误。
• 违反React状态不可变原则：React的状态更新依赖引用变化触发重渲染，你直接对原events执行push修改，之后传入setEvents的仍然是和原状态相同引用的值，React浅比较会判定状态未变更，因此不会触发页面更新。
• 提交逻辑未关联：表单提交回调handleSubmit中没有调用addEvent方法，提交表单后新增事件的逻辑完全没有执行。

import React, { useState, useEffect } from 'react';

export default function Dashboard() {
  // 初始化改为数组类型
  const [events, setEvents] = useState([]);
  const [eventName, setEventName] = useState('');

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

  const getEventsWithFetch = async () => {
    const response = await fetch("http://localhost:8080/get-all-events/");
    const jsonData = await response.json();
    setEvents(jsonData);
  };

  const addEvent = async (name) => {
    const response = await fetch("http://localhost:8080/create-event/", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        "title": name,
        "day": "1",
        "month": "2"
      })
    });
    const newEvent = await response.json();
    // 使用函数式更新拿到最新的状态，生成新数组传递给setEvents
    setEvents(prevEvents => [...prevEvents, newEvent]);
  };

  const handleSubmit = async e => {
    e.preventDefault();
    // 提交时调用新增事件方法
    await addEvent(eventName);
    // 可选：提交后清空输入框
    setEventName('');
  }

  return (
    <div>
      <p>EVENTS DASHBOARD</p>
      {JSON.stringify(events)}
      <form onSubmit={handleSubmit}>
        <label>
          <p><b>Event Name</b></p>
          <input type="text" name="event_name" value={eventName} onChange={e => setEventName(e.target.value)} />
        </label>
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  );
}

• 用函数式更新setEvents(prev => ...)可以确保拿到的是当前最新的events状态，避免闭包陷阱导致的旧状态问题。
• 输入框补充了value属性绑定eventName，变成受控组件，状态更可控。

内容的提问来源于stack exchange，提问作者Umair Khan Jadoon