Question

我有一些背景。我在那里存储用户角色。

const RolesContext = createContext({roles: []});
function RolesContextProvider({children}) {
  const [roles, setRoles] = useState([]);

  async function check(newRoles) {
    const missing = compareArrayWithArray(newRoles, roles);
    if (missing.length !== 0) {
      await User.roles(newRoles).then(((res) => {
        const updatedRoles = roles.concat(res.data);
        setRoles(updatedRoles);
      }));
    }
  }

  const defaultContext = {
    roles,
    check,
  };

  return (
    <RolesContext.Provider value={defaultContext}>
      {children}
    </RolesContext.Provider>
  );
}
export {RolesContext, RolesContextProvider};

启动组件时，我运行检查角色

export default function Users() {
  const UsersComposition = compose(
    connect(mapStateToProps, mapDispatchToProps)
  )(ConnectedUsers);
  const context = useContext(RolesContext);
  const {roles, check} = context;
  useEffect(() => {
    check(['roles', 'to', 'check']);
  }, [check]);
  return <UsersComposition roles={roles}/>;
};

它的作用...由于inifite更新状态循环，应用崩溃。它使用相同的负载发出数十个相同的请求。应该怎么做？感谢您的建议。

Answer 1

为了修复无限循环，您需要在渲染之间保留check函数的标识。一种方法是使用useRef保存它（您需要将现有角色作为第二个参数传递）：

const check = useRef(async (newRoles, roles) => {
    ...
});

const defaultContext = {
    roles,
    check: check.current,
};

您还可以考虑将Users实现为类组件，并在check中调用componentDidMount：

class Users extends React.Component {
    static contextType = RolesContext;

    componentDidMount() {
        this.context.check(['roles', 'to', 'check']);
    }

    render() {
        ...
    }
}

Answer 2

似乎您正在循环调用check。看看我是否正确。

RolesContextProvider提供了上下文roles和check
Users访问上下文并调用check
Check用roles更新RolesContextProvider中的setRoles
setRoles触发RolesContextProvider中的更新，这会更改上下文
上下文更改更新Users
然后循环重复

上下文API更新状态导致循环请求

2 个答案: