相关疑难解决方法(0)

我有一个计数器和一个console.log()来useEffect记录我状态中的每个变化，但是useEffect在挂载时被调用两次。我正在使用 React 18。这是我项目的CodeSandbox和以下代码：

import  { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(5);

  useEffect(() => {
    console.log("rendered", count);
  }, [count]);

  return (
    <div>
      <h1> Counter </h1>
      <div> {count} </div>
      <button onClick={() => setCount(count + 1)}> click to increase </button>
    </div>
  );
};

export default Counter;

每当我尝试使用makeStyles()具有生命周期方法的组件时，都会出现以下错误：

无效的挂接调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生：

1. 您可能使用了不匹配的React和渲染器版本（例如React DOM）
2. 您可能正在违反挂钩规则
3. 您可能在同一应用程序中拥有多个React副本

下面是产生此错误的代码的一个小示例。其他示例也将类分配给子项。我在MUI的文档中找不到任何显示其他使用方式makeStyles并可以使用生命周期方法的功能。

    import React, { Component } from 'react';
    import { Redirect } from 'react-router-dom';

    import { Container, makeStyles } from '@material-ui/core';

    import LogoButtonCard from '../molecules/Cards/LogoButtonCard';

    const useStyles = makeStyles(theme => ({
      root: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      },
    }));

    const classes = useStyles();

    class Welcome extends Component {
      render() {
        if (this.props.auth.isAuthenticated()) {
          return <Redirect to="/" />;
        }
        return (
          <Container maxWidth={false} className={classes.root}>
            <LogoButtonCard
              buttonText="Enter"
              headerText="Welcome to PlatformX" …

我在使用自定义反应挂钩方面遇到了一些困难。

我有 2 个定制挂钩。

第一个钩子用于获取 ID，第二个钩子用于使用先前获取的 ID 来获取配置文件。它依赖于该 ID，所以我需要等待这个承诺。

我有以下自定义挂钩：

export const UseMetamask = () => {

    //Todo: Create check if metamask is in browser, otherwise throw error
    const fetchWallet = async (): Promise<string | null> => {
        try {
            const accounts: string[] = await window.ethereum.request(
                {
                    method: 'eth_requestAccounts'
                },
            );

            return accounts[0];

        } catch(e) {
            console.error(e);

            return null;
        }
    }
    
    return fetchWallet();
}

然后在我的第二个钩子中我有：

const wallet = UseMetamask();

然后在反应查询调用中使用它，例如：

useQuery(
    ['user', wallet],
    () => getUserByWallet(wallet),

现在它抱怨钱包说它是一个Promise<string | null> …