React.js + Laravel中useContext状态更新无法触发组件重渲染的问题求助

嘿，我一眼就看到问题出在哪了——你直接修改了Context对象的属性，但React根本不会监测到这种变化，自然不会触发组件重渲染。另外你的Provider放置方式也有点问题，咱们一步步来修复：

1. 重构GlobalContext，用useState管理状态并提供更新函数 #

首先，Context本身只是个容器，它不会自动管理状态变化。咱们需要在Provider组件里用useState来维护状态，并把状态和更新函数一起传给子组件：

// GlobalContext.js
import React, { useState, createContext } from 'react';

export const initialState = {
  usersData: null,
  clickedNewUserButton: false,
  showAddUserPopup: false,
  isLoading: true,
};

export const GlobalContext = createContext();

// 创建一个Provider组件，封装状态管理逻辑
export function GlobalContextProvider({ children }) {
  const [state, setState] = useState(initialState);

  // 定义更新状态的函数，方便子组件调用
  const updateState = (newState) => {
    setState(prev => ({ ...prev, ...newState }));
  };

  return (
    <GlobalContext.Provider value={{ state, updateState }}>
      {children}
    </GlobalContext.Provider>
  );
}

2. 调整UsersPageMain的结构，把Provider放在外层 #

之前你在UsersPageMain的条件渲染里返回Provider，这会导致每次状态变化都重新创建Provider实例，子组件的Context订阅会混乱。现在咱们把Provider移到渲染的最外层：

// UsersPageMain.js
import React, { useContext } from 'react';
import ReactDOM from 'react-dom';
import { GlobalContext, GlobalContextProvider } from '../state/GlobalContext';
import FiltersButton from '../components/Users/FiltersButton';
import AddUserButton from '../components/Users/AddUserButton';
import UsersTable from '../components/Users/UsersTable';
import AddNewUserPopup from '../components/Users/AddNewUserPopup';

function UsersPageContent() {
  const { state } = useContext(GlobalContext);

  return (
    <div className='container users-list-page'>
      <div className='row'>
        <FiltersButton />
        <AddUserButton />
      </div>
      <div className='row'>
        <UsersTable />
      </div>
      {/* 直接根据state的值控制弹窗显示，不用条件渲染整个结构 */}
      {state.clickedNewUserButton && <AddNewUserPopup />}
    </div>
  );
}

function UsersPageMain() {
  return (
    <GlobalContextProvider>
      <UsersPageContent />
    </GlobalContextProvider>
  );
}

export default UsersPageMain;

if (document.getElementById('user-list-page')) {
  ReactDOM.render(<UsersPageMain />, document.getElementById('user-list-page'));
}

3. 修改AddUserButton，使用更新函数改变状态 #

现在不能直接修改context属性了，要调用咱们定义的updateState函数：

// AddUserButton.js
import React, { useContext } from "react";
import { GlobalContext } from "../../state/GlobalContext";

export default function AddUserButton(){
  const { updateState } = useContext(GlobalContext);

  function triggerUserPopupClick(){
    updateState({ clickedNewUserButton: true });
  }

  return(
    <div className="col-xl-2 col-md-4 col-12">
      <button type="button" onClick={triggerUserPopupClick} className="btn theme-primary-btn">Add New <i className="fa-solid fa-angles-right"></i></button>
    </div>
  )
}

4. 修复UsersTable里修改usersData的错误 #

同样，这里不能直接给context.state.usersData赋值，要用updateState：

// UsersTable.js
import axios from 'axios';
import React, {useContext, useEffect, useState} from "react";
import { GlobalContext } from "../../state/GlobalContext";
import Preloader from '../Preloader';
import Conf from '../../conf/Conf';

export default function UsersTable(){
  const { state, updateState } = useContext(GlobalContext);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('/api/get-all-users')
      .then(response => {
        updateState({ usersData: response.data.data });
        setLoading(false);
      });
  }, [updateState]); // 把updateState加入依赖数组

  if(loading){
    return <Preloader isLoading={loading}/>
  }else{
    return (
      <>
        <Preloader isLoading={loading}/>
        <div className="col-12">
          <div className="table-responsive rounded-table">
            <table className="table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Avatar</th>
                  <th>Name</th>
                  <th>Surname</th>
                  <th>Group</th>
                  <th>Email</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {state.usersData.map((user,index) => (
                  <tr key={user.email}>
                    <th>{user.id}</th>
                    <th>
                      <div className="avatar" style={{backgroundImage: `url(${Conf().assetPath}uploads/avatars/${user.avatar})`}}></div>
                    </th>
                    <th>{user.name}</th>
                    <th>{user.surname}</th>
                    <th>Group</th>
                    <th>{user.email}</th>
                    <th>
                      <button type="button" className="btn theme-edit-btn"><i className="fa-solid fa-pencil"></i></button>
                      <button type="button" className="btn theme-delete-btn"><i className="fa-solid fa-delete-left"></i></button>
                    </th>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </>
    )
  }
}

关键知识点总结 #

• React Context的状态必须通过useState或useReducer来管理，直接修改对象属性不会触发重渲染。
• 应该把Context Provider放在组件树的外层，确保所有需要订阅Context的子组件都能访问到。
• 子组件通过调用Provider提供的更新函数来修改状态，而不是直接操作Context对象。

这样修改后，点击Add New按钮就能正确触发弹窗显示了！

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