小编Ali*_*aie的帖子

在组件中使用 getStaticProps

我用 next js 和 typescript 开始了一个项目。我有一个在 index.js 页面中调用它的主组件，我在主组件中使用 getStaticProps 函数 getStaticProps 返回一个 prop 对象，当我在主组件中记录这个 prop 时，我在控制台中收到了 undefined 。我想知道在组件中使用 getStaticProps 是错误的，我只需在页面中使用该函数即可。我是 next js 的新手，如果有人能帮助我，我将非常感激。

这是我的主要组成部分

import React from 'react';
import {IMain} from "../../../../interfaces/components/IMenu/IMain";

const Main:React.FC<IMain> = (props) => {
    console.log(props);
    return (
        <div>
        </div>
    );
};


export async function getServerSideProps() {
    return {
        props: {
            data: 'ggwp'
        }
    };
}

export default Main;

Run Code Online (Sandbox Code Playgroud)

这是我的index.js 页面

import Text from "./../components/ui/Text/Text";
import Button from "../components/ui/Button/Button";
import Main from "../components/Menu/Desktop/Main/Main";

const Home = () …

Run Code Online (Sandbox Code Playgroud)

javascript typescript reactjs next.js

Ali*_*aie

2022 09-28

25
推荐指数

1
解决办法

3万
查看次数

在 nextjs 中的页面之间路由时如何保持 Context API 状态？

我有一个带有 nextJs 和 typescript 的项目。我使用上下文 API 来处理应用程序中的全局状态。我的问题是，当我在页面之间导航时，我的状态会再次重新评估。（我使用了 nextjs 链接标签）换句话说，我希望我的上下文仅更新一次，而不是每次在页面之间导航时更新。这是我的背景

import React, {createContext, useState} from "react";

export type ResourcesType =
    'ALL'
    | 'ORDERS'
    | 'ORDERS_CANCELLATION'
    | 'ORDERS_PARTIAL_PAID';

export type AccessType = 'ACT' | 'READ' | 'UPDATE' | 'CREATE' | 'DELETE' | 'All';

export type AccessLevel = 'DO' | 'REQUEST' | 'APPROVE';

export type PermissionType = {
    [key1 in ResourcesType]: {
        [key2 in AccessType]: AccessLevel
    }
} | null;

const PermissionsContext = createContext<{
    permissions: PermissionType,
    setPermissionsHandler: (permissions: PermissionType) => void

}>({
    permissions: …

Run Code Online (Sandbox Code Playgroud)

javascript typescript reactjs next.js react-context

Ali*_*aie

lucky-day

7
推荐指数

1
解决办法

5153
查看次数

是的，在 matches 函数中使用 not(!) 时验证不起作用

我有一个使用 React 和 next js 的项目。我使用 formik 来处理我的表单，是的，用于验证我有一个输入，我想对其执行一些验证。

此字段必须为必填字段，因此如果用户不输入任何信息，我将显示此消息 => 必填
该字段不应包含任何数字，否则我显示此消息 => Wronggggg
此字段必须仅包含波斯语字符，否则我显示此消息 => 仅波斯语字符

这是我的架构

 Yup.string()
            .required("Requiredddd")
            .matches(!/\d/, 'Wrongggg'),
            .matches(/^[\u0600-\u06FF\s]+$/, 'Only persian chars')

Run Code Online (Sandbox Code Playgroud)

但在这种情况下，条件号 2 总是被认为是错误的。我认为 (!/\d/) 是错误的，但我不知道如何使用否定匹配函数

javascript reactjs next.js yup formik

Ali*_*aie

2023 01-07

6
推荐指数

2
解决办法

9426
查看次数

在 nextjs 中将 props 从一个页面传递到另一个页面

我有一个虚拟项目。在我的项目中，我有两个页面。（test1 和 test2）我想将一个道具从 page1 传递到 page2。我知道我可以使用 useRouter 钩子，但我不想将此道具设置为查询字符串。在我的 test1 页面中，我有一个颜色变量。这是常量，并且有一个黄色值。我想在我的 page2 中使用此颜色作为道具（props.color），这是我的 test1 页面

import React from 'react';
const Test1 = props => {
   const color='yellow';
    return (
        <div>
            test1
        </div>
    );
};

export default Test1;

Run Code Online (Sandbox Code Playgroud)

这是我的 test2 页面

import React from 'react';

const Test2 = props => {
    return (
        <div>
            Your color is {props.color}
        </div>
    );
};


export default Test2;

Run Code Online (Sandbox Code Playgroud)

javascript reactjs next.js react-props

Ali*_*aie

2022 08-01

4
推荐指数

1
解决办法

2万
查看次数

在下一个js的getStaticProps中使用axios

我有一个下一个项目。在这个项目中，我使用 axios 发送和接收请求数据。但是当我在 getStaticProps 函数中使用 axios 时遇到问题，我在 index.js 页面中收到错误

这是我的index.js

 import axios from "axios";

const Home = (props) => {
    console.log(props);
    return <div>d</div>;
};

export async function getStaticProps() {
    const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');

    return {
        props: {
            data: res
        }
    };
}


export default Home;

Run Code Online (Sandbox Code Playgroud)

这是我的浏览器中的 index.js 页面

如果有人能帮助我，我将非常感激

javascript typescript reactjs axios next.js

Ali*_*aie

lucky-day

3
推荐指数

1
解决办法

1万
查看次数

表单数据未填写到 React 中

我有一个非常基本的项目，在这个项目中，我有一个简单的表单。当我提交此表单时，我将数据放入带有追加方法的表单数据中，之后当我在控制台中记录表单数据时，它是一个空对象，我很想知道为什么会发生这种情况，这是我的代码

import styles from '../styles/Home.module.css'
import {useState} from "react";

export default function Home() {
    const [inputs, setInputs] = useState({
        name: '',
        mobile: ''
    });
    const changeHandler = (e) => {
        setInputs(prev => {
            const cloneState = {...prev};
            cloneState[e.target.name] = e.target.value;
            return cloneState;
        });
    }

    const clickHandler = (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('name', inputs.name);
        formData.append('mobile', inputs.mobile);
        console.log(formData, 'FD');
    }
    return (
        <div className={styles.container}>
            <form>
                <input type="text" onChange={changeHandler} name='name'/>
                <input type="text" onChange={changeHandler} name='mobile'/>
                <button type='submit' onClick={clickHandler}>Submit</button>
            </form> …

Run Code Online (Sandbox Code Playgroud)

javascript forms form-data reactjs next.js

Ali*_*aie

lucky-day

1
推荐指数

1
解决办法

7880
查看次数