React 小白学习过程中遇到技术问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 667 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近在学习 React ，还在 CRUD 阶段，目前遇到一个问题，没找到什么原因，还望大佬们指点一二

主要的问题就是我每次刷新页面，projects 和 users 接口都被调用了两次

嵌套结构是 <App> <ProjectListPage> </App>

以下是 ProjectListPage 组件的代码，只有这个组件有处理各种状态，其他两个组件 SeachPanel 、List 都没有状态的处理

import React, {useEffect, useState} from "react";
import {SeachPanel} from "./search-panel";
import {List} from "./list";
import {cleanObject, uesMount} from "../../utils";
import qs from "qs";

const apiUrl = 'http://localhost:3001'
export const ProjectListPage = () =>{
 
    const [param,setParam] = useState({
        name: '',
        personId: ''
    })

    const [list,setList] = useState([])

    // 当搜索内容改变的时候从新获取列表（默认会先执行一次）
    useEffect(()=>{
        fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(param))}`).then(async (resp) => {
            if (resp.ok) {
                setList(await resp.json())
            }
        })
    },[])

    // option 用户状态
    const [users,setUsers] = useState([])
    useEffect(()=>{
        fetch(`${apiUrl}/users`).then(async (resp) => {
            if (resp.ok) {
                setUsers(await resp.json())
            }
        })
    },[])

    return <div>
        <SeachPanel users={users} param={param} setParam={setParam}/>
        <List users={users} list={list}/>
    </div>
}

15 条回复 • 2023-03-06 09:34:41 +08:00

Satelli

2023-03-05 18:08:45 +08:00

https://zh-hans.reactjs.org/docs/strict-mode.html#ensuring-reusable-state

Leviathann

2023-03-05 18:10:22 +08:00

strictMode 默认行为就是在开发模式下调用两次 useEffect
意思就是仅调用一次并不是 useEffect 定义的行为，只是目前是这么实现的，以后可能会改
调用两次的目的就是让你不要依赖 useEffect 的行为，而是显式声明一个标记值，根据标记值决定是否要执行

Parker0

2023-03-05 18:29:18 +08:00

@Satelli
@Leviathann
了解，感谢两位大佬，问题已解决！

huijiewei

2023-03-05 19:43:31 +08:00

用 swr

beginor

2023-03-05 19:50:47 +08:00 via Android

建议结合 react-router ，把加载数据 /保存数据之类的操作都写在路由的 loader 和 action 里面，jsx 只做界面，这样逻辑清晰很多，可以看下 react-router 官方的 tutorial

https://reactrouter.com/en/main/start/tutorial