如何从React路由组件更新父组件状态以触发重渲染？

嘿，这个场景我在项目里碰到好多次了，结合你用的React-Redux + React-Router技术栈，给你几个实用的解决方案：

既然已经用了React-Redux，这本来就是解决跨组件状态同步的最优方案：

• 先确保事件列表数据存在Redux Store中，而不是父组件的本地state。父组件通过useSelector（函数组件）或connect（类组件）从Store取数，只要Store里的事件数据更新，父组件会自动触发重渲染。
• 表单提交后，调用对应的Redux Action（比如addEvent），在Reducer里以不可变方式把新事件加入列表数组（比如用扩展运算符[...prevEvents, newEvent]，不能直接用push）。
• 简单代码示例：
  表单组件的提交逻辑：

  import { useDispatch } from 'react-redux';
  import { useNavigate } from 'react-router-dom';
  import { addEvent } from '../redux/actions/eventActions';
  
  const EventForm = () => {
    const dispatch = useDispatch();
    const navigate = useNavigate();
  
    const handleSubmit = async (formData) => {
      // 假设先调用API创建事件，拿到返回的完整数据
      const newEvent = await apiCreateEvent(formData);
      // 触发Redux Action更新Store
      dispatch(addEvent(newEvent));
      // 跳回事件列表页
      navigate('/events');
    };
  
    // 表单渲染逻辑...
  };
  

  父组件（事件列表）获取状态：

  import { useSelector } from 'react-redux';
  
  const EventList = () => {
    // 从Store获取事件列表，状态更新时自动重渲染
    const events = useSelector(state => state.events.list);
  
    return (
      <div>
        {events.map(event => <EventItem key={event.id} data={event} />)}
      </div>
    );
  };
  

如果不想依赖Redux，也可以通过路由状态临时传递新事件数据：

• 表单提交后，用navigate跳转时带上新事件的状态：

  import { useNavigate } from 'react-router-dom';
  
  const EventForm = () => {
    const navigate = useNavigate();
  
    const handleSubmit = async (formData) => {
      const newEvent = await apiCreateEvent(formData);
      // 跳转时通过state传递新事件
      navigate('/events', { state: { newEvent } });
    };
  };
  

• 父组件通过useLocation监听路由状态变化，更新本地state：

  import { useLocation, useEffect } from 'react-router-dom';
  import { useState } from 'react';
  
  const EventList = () => {
    const [events, setEvents] = useState([]);
    const location = useLocation();
  
    useEffect(() => {
      if (location.state?.newEvent) {
        // 添加新事件到列表
        setEvents(prev => [...prev, location.state.newEvent]);
        // 清除路由state，避免刷新页面重复添加
        location.state = null;
      }
    }, [location.state]);
  
    // 渲染列表...
  };
  

  注意：路由state在页面刷新后会丢失，所以这个方案只适合临时场景，长期来看还是Redux更可靠。

如果表单组件和父组件层级不远，也可以通过props传递回调函数：

• 父组件定义更新列表的回调，传给路由渲染的表单组件：

  import { useState } from 'react';
  import { Route, Routes } from 'react-router-dom';
  import EventForm from './EventForm';
  import EventList from './EventList';
  
  const EventParent = () => {
    const [events, setEvents] = useState([]);
  
    const handleEventAdded = (newEvent) => {
      setEvents(prev => [...prev, newEvent]);
    };
  
    return (
      <div>
        <Routes>
          <Route path="/events/new" element={<EventForm onEventAdded={handleEventAdded} />} />
        </Routes>
        <EventList events={events} />
      </div>
    );
  };
  

• 表单组件提交后调用这个回调：

  import { useNavigate } from 'react-router-dom';
  
  const EventForm = ({ onEventAdded }) => {
    const navigate = useNavigate();
  
    const handleSubmit = async (formData) => {
      const newEvent = await apiCreateEvent(formData);
      onEventAdded(newEvent);
      navigate('/events');
    };
  };
  

  缺点：如果组件层级很深，回调会层层传递（“props drilling”），代码会变得冗余，这时候还是Redux更合适。

最后提个小坑：如果之前的尝试没生效，大概率是状态更新方式不对——比如在Redux Reducer里直接修改原数组，或者父组件的state更新没有用不可变方式。一定要记住：React和Redux都依赖状态的引用变化来触发重渲染，所以更新数组/对象时要返回新的引用，不能直接修改原数据。

内容的提问来源于stack exchange，提问作者user6728767