小编Rat*_*rai的帖子

我在我的 React 项目中使用 apollo-graphql ，并且收到以下错误

无效的挂钩调用。钩子只能在函数组件体内调用

这是我的代码

import React, { useEffect, useState, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";

// **************** COMPONENTS ****************
import { GET_MORTGAGE_JOURNEY } from "../../../../Graphql/Journeys/query";

export default function index() {
  const insuranceId = useSelector((state) => state.mortgage.insuranceId);

  // Panels Heading to show on all panels

  useEffect(() => {
    if (insuranceId) {
      getMortgageData(insuranceId);
    }
  }, [insuranceId]);

  function getMortgageData(insuranceId) {
    const { loading, error, data } = useQuery(GET_MORTGAGE_JOURNEY, {
      variables: { id: insuranceId },
    }); …

我在我的本机项目中使用 useFormik 钩子

所以我尝试在我的另一个组件中初始化 useFormik，然后将它导入我的注册页面并在此处使用。这是下面的代码。

import React from "react";
import { Formik } from "formik";
import {
  signupValidationSchema,
} from "../../validationSchemas";
import { useFormik } from "formik";

export const SignupFormik = () => {
  const formik=useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      state: "",
      city: "",
      type: "",
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
    validationSchema: signupValidationSchema,
  });
  return formik
};

注册.js

import { SignupFormik } from "../../Tools";
import {Form} from 'formik'
export function …

我计划将React-slick库添加到我的 nextjs 项目中以用于图像滑块，但遇到了问题

尝试安装“react-slick”和“slick-carousel”，如文档中提到的

yarn add react-slick
yarn add slick-carousel

但是一旦我在 _app.tsx 文件中导入 css，就会出现错误

找不到模块：无法解析“~slick-carousel/slick/slick-theme.css”

_app.tsx 文件

import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import "@styles/global.scss";
import { Provider } from "react-redux";
import store from "@redux/store";  
import { MuiThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import theme from "src/createMiuitheme";


import "~slick-carousel/slick/slick.css";               //here
import "~slick-carousel/slick/slick-theme.css";         //here

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  // const theme = responsiveFontSizes(createTheme()); …

我正在尝试将打字稿添加到我当前的项目中，因此在将它与 Axios post 请求一起使用后我遇到了一个问题。

用例是我想在我的帖子请求中发送“电子邮件”“名字”“姓氏”和“密码”，作为响应我想要“accessToken”

这是下面的代码

export interface UserRegistrationModel {
  email: string;
  password: string;
  firstname: string;
  lastname: string;
}



export const register = async (user: UserRegistrationModel) => {
  const { data } = await http.post<UserRegistrationModel>("/users", user);
  return data;
};

这是我提交注册表后调用的函数，例如

register(values)
        .then((data) => {
          console.log(data.accessToken);
          setLoading(false);

        })
        .catch(() => {
          setLoading(false);

        });

所以当我尝试通过 data.acessToken 访问“accessToken”时，在我的 then 块中会抛出错误

类型“UserRegistrationModel”上不存在属性“accessToken”

所以我尝试定义一个名为“AuthModel”的新接口，但是当我将它分配给像这样的数据时

export interface AuthModel {
  accessToken: string
}


 register(values)
        .then((data:AuthModel) => {
          console.log(data.accessToken);
          setLoading(false);
        })
        .catch(() => {
          setLoading(false);
          setSubmitting(false);
          setStatus("Registration process …

大家好，我在我的项目中使用react-select以及Formik和Yup进行验证问题是，即使我在通过Yup验证后在控制台中的错误对象中看到错误，但我无法在前端显示该错误

这是下面的代码

export default function FormSection({\n  onContinueButton,\n  allFormValues,\n  holders,\n}) {\n  console.log(holders, "hol12");\n\n  const formik = useFormik({\n    initialValues: {\n      firstBirthDate: "",\n      firstSmoker: "",\n      secondBirthDate: "",\n      secondSmoker: "",\n    },\n\n    onSubmit: (values, { setSubmitting }) => {\n      console.log(formik.errors);\n      console.log(formik.values, "valqwqrwe");\n\n      setSubmitting(false);\n      allFormValues(formik.values);\n      console.log(values);\n    },\n    validationSchema: validationSchemaSectionTwo,\n  });\n  const options = [\n    { value: "N\xc3\xa3o", label: "N\xc3\xa3o" },\n    { value: "Sim", label: "Sim" },\n  ];\n\n  const handleChangeFirstHolder = (selectedOption) => {\n    formik.setFieldValue("firstSmoker", selectedOption);\n  };\n\n\n  return (\n    <div className="secondSection">\n      <form onSubmit={formik.handleSubmit}>\n        <React.Fragment>\n <p …

大家好，我正在尝试使用 svg 在 css 中制作波浪动画，大部分工作正常，但我确实有一个问题，一旦波浪到达终点，它会突然重新开始，区别在于清晰可见，我想让过渡平滑以获得更好的用户界面，以便对用户来说波浪似乎是无穷无尽的。

请检查下面的代码片段以了解我的问题谢谢

.wave {
  background: url(https://gist.githubusercontent.com/ratnabh/da8213a27700e0e1c2d1c81961070f6f/raw/3608a5072f4e392b852e5cc3c244841025b32c81/wave1.svg) repeat-x; 
  position: absolute;
  opacity:0.2;
  bottom: 0px;
  width: 2000px;
  height: 198px;
  animation: wave 2s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1000px;
  }
}

<div class="wave"></div>
        

嘿，刚开始使用 React，所以我通过 npm 下载了很棒的字体，并在 App.js 中导入了 font-awesome.min.css 文件

import 'font-awesome/css/font-awesome.min.css';

现在下面是两个代码

 <i className="fa fa-sun"/>
 <i className="fa fa-spinner fa-spin"/>

第一个不起作用，但我从stackoverflow答案复制粘贴的第二个工作非常奇怪。我该如何解决这个问题？

嘿伙计们，我在 nextjs 中使用 redux thunk，现在我想在我的应用程序中添加 redux-persist。所以最初我的代码就像

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';

export const makeStore = (initialState, options) => {
    return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunk)));
};

任何人都可以帮助我只在 redux 的设置中坚持吗？我尝试了一些解决方案但没有解决