SharePoint Online中React+Redux调用useSelector报React error #31

DevOps 小满

2026-8-29

我已针对该问题自行排查2天仍未解决，特此咨询是否有开发者遇到过同类问题。
我在SharePoint Online项目中使用Redux Toolkit实现跨组件状态传递，第一个组件运行完全正常，但在第二个组件中调用useSelector函数时触发Minified React error #31错误。我通过console.log打印校验，确认两个组件均可正常获取Redux存储中的数据，但只要在第二个组件中使用该数据就会触发报错，相关实现代码如下：

slice代码：

import { createSlice } from '@reduxjs/toolkit';

export interface titleState {
  title: string;
}

const initialState: titleState = {
  title : 'Your title'
};

export const titleSlice = createSlice({
  name: 'title',
  initialState,
  reducers: {
    SET_TITLE: (state, action) => {
      state.title = action.payload;
    }
  }
});

export const { SET_TITLE } = titleSlice.actions;

export default titleSlice.reducer;

store代码：

import { configureStore } from '@reduxjs/toolkit';
import titleReducer from "../features/titleSlice/titleSlice";
export const store: any = configureStore({
  reducer: {
    title: titleReducer
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

第一个组件代码：

import { useSelector, useDispatch } from "react-redux";
import { AppDispatch, RootState } from "../../../../redux/store/store";

const FirstComponent: FunctionComponent<FirstComponent> = (
  props
) => {
  const STATE_TITLE = useSelector((state: RootState) => state.title);
  console.log(STATE_TITLE);
  const dispatch = useDispatch<AppDispatch>();
const handleTitle = (e) => {
    dispatch(SET_TITLE(e.target.value));
    setTitle(e.target.value);
  }
return (
  <div>
   <textarea
     onChange={handleTitle} //works fine
   />
  </div>
}

第二个组件代码（报错位置为{YOUR_TITLE}所在行）：

import { useSelector, useDispatch } from "react-redux";
import { AppDispatch, RootState } from "../../../../redux/store/store";
const SecondComponent: FunctionComponent<ISecondComponentProps> = (props) => {
  const TITLE_STATE = useSelector((state: RootState) => state.title)
  console.log(TITLE_STATE)
return (
  <div>
   {YOUR_TITLE} //this line happens error
  </div>
)

问题原因

Minified React error #31的触发条件是JSX渲染了无效的子节点，和useSelector本身无关，你的代码存在两个直接触发报错的问题：

JSX中使用的YOUR_TITLE是未声明的变量，既没有从Redux state中取值，也没有在组件内定义，访问未定义变量直接渲染会触发报错
你通过useSelector拿到的TITLE_STATE是整个title slice的状态对象，结构为{ title: string }，React不支持直接渲染普通对象类型，就算你把代码改成{TITLE_STATE}一样会触发相同错误
你能通过console.log打印出Redux数据，只能说明useSelector正常获取到了store值，不代表你取值的方式符合React渲染规则。

修复方案

修正第二个组件的取值逻辑，直接从state中取出需要渲染的字符串类型title字段，不要使用未声明变量，也不要直接渲染整个state对象：

import { useSelector } from "react-redux";
import { RootState } from "../../../../redux/store/store";
const SecondComponent: FunctionComponent<ISecondComponentProps> = (props) => {
  // 直接取title字段，返回原始字符串类型可直接渲染
  const yourTitle = useSelector((state: RootState) => state.title.title)
  return (
    <div>
     {yourTitle}
    </div>
  )
}

移除store定义时的冗余any类型标注，否则会丢失TS类型推导，导致后续写代码时无法获得字段提示：

import { configureStore } from '@reduxjs/toolkit';
import titleReducer from "../features/titleSlice/titleSlice";
// 去掉: any，保证TS类型推导正常
export const store = configureStore({
  reducer: {
    title: titleReducer
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

清理第一个组件的冗余状态逻辑：你已经通过dispatch把title值存入Redux，不需要额外调用本地setTitle维护一份组件私有状态，避免多份状态不同步的问题。

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