小编Ahm*_*bai的帖子

我从 NextJS 应用程序收到以下警告：

警告：来自服务器的额外属性：data-new-gr-cs-check-loaded、data-gr-ext-installed、cz-shortcut-listen、data-lt-installed

我不知道为什么会发生这种情况，这是什么解释？

两天来，我一直在努力使用我的 Next.js 应用程序运行功能性 Swiper Grid 选项。我已经尝试了许多 stackoverflow 解决方案，并尝试了不同的方法来使此网格行为适用于我的应用程序，唉！所有尝试都失败了，而且都没有添加网格功能。

最后，我实现了 Swiper 本身的代码示例。虽然演示代码可以在他们的平台上运行，但不能在我的应用程序中运行。我什么也没做，只是复制代码并在 Next.js 应用程序中为 Swiper Grid 创建一个新页面。

我不知道为什么它没有表现出应有的行为。参考站点和代码如下：

工作演示参考：https://codesandbox.io/s/20p7zs? file=/src/App.jsx:0-1049

import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/grid";
import "swiper/css/pagination";

// import required modules
import { Grid, Pagination } from "swiper";

export default function App() {
  return (
    <>
      <Swiper
        slidesPerView={3}
        grid={{
          rows: 2,
        }}
        spaceBetween={30}
        pagination={{
          clickable: true,
        }} …

我有两个按钮，一个是“按钮”类型，一个是“提交”类型，两者都包装在表单中并且相互切换。奇怪的是，如果我单击“按钮”类型的按钮，则会提交表单，而如果我单击“提交”类型的按钮，则不会提交表单。

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

function App() {
  const [clicked, setClicked] = React.useState(false);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        console.log("form submitted!");
      }}
    >
      {!clicked ? (
        <button type="button" onClick={() => setClicked(true)}>
          Button 1
        </button>
      ) : (
        <button type="submit" onClick={() => setClicked(false)}>
          Button 2
        </button>
      )}
    </form>
  );
}

root.render(
  <App />
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id='root'></div>

我预计提交表格时的情况恰恰相反。

我为使用 recharts 实现的图表创建了一个自定义工具提示。我想更改它的样式，但无法删除行之间的额外空白。我尝试更改行高、填充和边距来消除空间，但没有任何效果。

<div className="customTooltip">
  <h2 className="tooltipLabel">{e.payload[0].payload.initiatorUsername}</h2>
  <i className="tooltipTitle">{e.payload[0].payload.title}</i>
  <div className="tooltipContent">
    <p>Request startTime:</p>
    <p>Approver name:</p>
    <p>Approver Title</p>
    <p>
      Approved Time:{" "}
      {moment.unix(e.payload[0].payload.time).format("MMM Do YYYY, h:mm:ss")}
    </p>
  </div>
</div>

.recharts-tooltip-wrapper {
    .customTooltip {
      margin: 0;
      line-height: 5px;
      border: 1px solid #f5f5f5;
      background-color: rgba(255, 255, 255, 255);
      padding-bottom: 0%;
  
      .tooltipTitle {
        margin: -10px;
        color: #666;
        top:5px;
      }
    }
  }

哪个样式属性可以帮助我实现它？

export default class CalorieScreen extends Component {
  constructor() {
    super();
    this.state = { text: "" };
  }
  render() {
    const { calories } = this.state;
    return (
      <View style={styles.container}>
        <Header
          backgroundColor={"#9c8210"}
          centerComponent={{
            text: "Monkey Chunky",
            style: { padding: 100, color: "#fff", fontSize: 20 },
          }}
        />
      </View>
    );
  }
}

我创建了一个登录屏幕，当我单击按钮时，该屏幕会进入我的卡路里屏幕，但会出现此错误

我正在使用下一个路由器，我想将数据传递到另一个页面，但我不希望数据显示在 URL 中

我有一个按钮，一旦单击它就会重定向到另一个页面并向myObject其传递一个对象。

const router = useRouter();
const myObject = {
  proprety1: "example1",
  proprety2: "example2",
  proprety3: "example3",
}
//...
<button
   onClick={() => {
     router.push({
       pathname: "/next-page",
       query: { data: JSON.stringify(myObject) },
     });
   }}
 >
   Navigate
</button>

然后next-page我得到这个 URL ：

http://localhost:3000/next-page?data=%7B"proprety1"%3A"example1"%2C"proprety2"%3A"example2"%2C"proprety3"%3A"example3"%7D

这工作起来很清楚，但它真的很难看，不仅如此，我不希望在 url 中向用户显示数据。

我正在尝试使用 React 和 Leva js 创建一个简单的应用程序。

基本上有一个项目数组，每个项目都有一个名称和一个数字数组。Leva 面板包含两个选择，用户可以从项目数组中选择两个项目。

如果两个选定的项目具有相同的长度，则可以，否则应用程序应返回错误。

这里是主要代码，这里是一个工作演示。

应用程序.jsx：

export const App = () => {
  const [haveSameNumberOfValues, setHaveSameNumberOfValues] = useState(true);
  const [showResult, setShowResult] = useState(haveSameNumberOfValues);

  const { startValuesName, endValuesName } = useControls({
    startValuesName: {
      value: VALUES[0].name,
      options: VALUES.map((d) => d.name)
    },
    endValuesName: { value: VALUES[1].name, options: VALUES.map((d) => d.name) }
  });

  useEffect(() => {
    const startValuesItem = getValuesFromName(startValuesName);
    const endValuesItem = getValuesFromName(endValuesName);
    const startValues = startValuesItem.values;
    const endValues = endValuesItem.values;

    const values = [startValues, …

我使用 React 已经近 3 年了，但有时会在“渲染”的含义上遇到困难。

实际上，为了检查“渲染”，我刚刚输入了

console.log('render')

在之前的组件中

return <>...</>

这是正确的检查吗？或者我无法知道是否重新渲染？

next-auth我正在使用库控制下一个应用程序中的用户身份验证

我正在使用credentials provider. 首先，我调用返回用户信息的登录端点，然后获取访问令牌并将其放入由 给出的令牌内next-auth callback。

这是我的代码[...nextauth].js

const authOptions = {
  session: {
    strategy: "jwt",
  },
  providers: [
    CredentialsProvider({
      type: "credentials",
      credentials: {},
      async authorize(credentials, req) {
        const { email, password } = credentials;
        const result = await axios.post(
          `http://127.0.0.1:5000/user/login`,
          {
            email,
            password,
          },
          {
            headers: { "Content-Type": "application/json" },
            withCredentials: true,
          }
        );
        return {
          accessToken: result.data.accessToken,
        };
      },
    }),
  ],
  callbacks: {
    async jwt({ user, token }) {
    if (user?.accessToken) {
    token.value …

当我刷新页面时，出现以下错误：

文本内容与服务器呈现的 HTML 不匹配。Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。补水时出现错误。由于错误发生在 Suspense 边界之外，因此整个根将切换到客户端渲染。

这是我的文件代码：

/* eslint-disable @next/next/no-img-element */
import Header from '@/components/Header'
import blockContent from '@/medium-sanity-copy/schemas/blockContent'
import { PostType, SlugType } from '@/types'
import { Formik, Field, Form, ErrorMessage } from 'formik'
import { FieldProps } from 'formik/dist/Field'
import { GetStaticProps } from 'next'
import Head from 'next/head'
import React from 'react'
import PortableText from 'react-portable-text'
import { client, urlFor } from './../../sanity'
import * as yup from 'yup'

interface PostProps {
  post: PostType …