如何解决React useState无限渲染错误并在特定URL修改值？

错误原因 #

你当前的代码直接在组件顶层逻辑中调用setName，每次组件渲染时都会执行这段代码。而setState会触发组件重新渲染，这就形成了无限渲染循环——渲染→调用setName→触发重渲染→再次调用setName……最终React抛出Too many re-renders错误。

解决方案 #

以下是几种可行的解决方式，根据你的需求选择：

1. 使用useEffect监听URL变化（适合需要后续动态更新的场景） #

通过useEffect钩子，仅在URL变化时执行状态更新，避免无限循环：

import React,{useState, useEffect} from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

function MK(){
    const url = window.location.href;
    const [name,setName] = useState('');

    useEffect(() => {
        // 当URL包含'point'时设置name值
        if(url.includes('point')){
            setName('error point');
        } else {
            // URL不包含时重置（可选）
            setName('');
        }
    }, [url]); // 仅在url变化时执行该逻辑

    return(
        <Form>
            <Form.Group className="mb-3" controlId="formBasicEmail">
                <Form.Label style={{color : 'white'}} id="label1">{name} 이름</Form.Label>
                <Form.Control style={{width:'30%'}}/>
            </Form.Group>

            <Form.Group className="mb-3" controlId="formBasicPassword">
                <Form.Label style={{color : 'white'}}> 설명</Form.Label>
                <Form.Control style={{width : '30%'}} as="textarea" rows={3} />
            </Form.Group>

            <Form.Group controlId="formFile" className="mb-3">
                <Form.Label style={{color : 'white'}}> 사진</Form.Label>
                <Form.Control style={{width : '30%'}} type="file" />
            </Form.Group>

            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
    );
}
export default MK;

2. 直接在useState初始化时设置值（适合仅初始化时判断的场景） #

如果name的值只需要在组件首次加载时根据URL确定，不需要后续修改，直接在状态初始化时完成判断：

import React,{useState} from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

function MK(){
    const url = window.location.href;
    // 初始化时直接根据URL设置name的初始值
    const [name,setName] = useState(url.includes('point') ? 'error point' : '');

    return(
        <Form>
            <Form.Group className="mb-3" controlId="formBasicEmail">
                <Form.Label style={{color : 'white'}} id="label1">{name} 이름</Form.Label>
                <Form.Control style={{width:'30%'}}/>
            </Form.Group>

            <Form.Group className="mb-3" controlId="formBasicPassword">
                <Form.Label style={{color : 'white'}}> 설명</Form.Label>
                <Form.Control style={{width : '30%'}} as="textarea" rows={3} />
            </Form.Group>

            <Form.Group controlId="formFile" className="mb-3">
                <Form.Label style={{color : 'white'}}> 사진</Form.Label>
                <Form.Control style={{width : '30%'}} type="file" />
            </Form.Group>

            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
    );
}
export default MK;

3. 直接在JSX中条件渲染（无需维护状态的场景） #

如果不需要通过setName修改这个文本，完全可以跳过state，直接在渲染时判断URL：

import React from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

function MK(){
    const url = window.location.href;

    return(
        <Form>
            <Form.Group className="mb-3" controlId="formBasicEmail">
                {/* 直接在JSX中根据URL显示对应文本 */}
                <Form.Label style={{color : 'white'}} id="label1">
                    {url.includes('point') ? 'error point' : ''} 이름
                </Form.Label>
                <Form.Control style={{width:'30%'}}/>
            </Form.Group>

            <Form.Group className="mb-3" controlId="formBasicPassword">
                <Form.Label style={{color : 'white'}}> 설명</Form.Label>
                <Form.Control style={{width : '30%'}} as="textarea" rows={3} />
            </Form.Group>

            <Form.Group controlId="formFile" className="mb-3">
                <Form.Label style={{color : 'white'}}> 사진</Form.Label>
                <Form.Control style={{width : '30%'}} type="file" />
            </Form.Group>

            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
    );
}
export default MK;

内容的提问来源于stack exchange，提问作者codingRookie