React组件点击按钮后Spinner不显示的问题求助

核心问题 #

你的代码里，Spinner只有在isUpdated为true时才会被渲染，但点击按钮后，isUpdated只会在请求完成后才会被设为true，这就导致请求过程中页面还是显示输入框和按钮，Spinner根本没机会出现。

修复方案 #

调整渲染逻辑，让Spinner在spinner状态为true时直接替换输入框和按钮区域，同时修正几个潜在问题：

1. 用React的useRef替代直接操作DOM，符合React状态管理规范
2. 修正axios的POST请求参数格式（axios的POST第二个参数直接传请求体，不需要包在body字段里）
3. 调整条件渲染逻辑，让请求过程中能显示Spinner

修改后的代码：

import { useState, useRef } from 'react';

function User(props) {
    const [memo, setMemo] = useState('');
    const [isUpdated, setIsUpdated] = useState(false);
    const [spinner, setSpinner] = useState(false);
    // 使用useRef获取输入框元素
    const inputRef = useRef(null);

    const onClickForm = (e) => {
        e.preventDefault();

        setSpinner(true);

        // 修正axios参数：直接传请求体，不需要body字段
        axios.post(url, {
            "internalid": props.internalid,
            "memo": memo
        }, {
            headers: {"Content-Type": "application/json"}
        }).then(response => {
            console.log(response.data[0]);
            setSpinner(false);
            if (response.data[0].Success) {
                setIsUpdated(true);
                setMemo('');
                // 通过ref清空输入框
                if (inputRef.current) inputRef.current.value = '';
            }
        }, (error) => {
            setIsUpdated(true);
            setSpinner(false);
            console.log(error);
        });
    }

    return (
        <div key={props.index}>
            <form onSubmit={onClickForm}>
                <Card className="card" key={props.index}>
                    <Card.Content>
                        <Card.Header>{props.tranid}</Card.Header>
                        <Card.Description>
                            {props.name}
                        </Card.Description>
                        <br/>
                        {isUpdated ? (
                            <p style={{color: 'green'}}>UPDATED!</p>
                        ) : spinner ? (
                            <CircularProgress/>
                        ) : (
                            <div>
                                <Input 
                                    ref={inputRef} 
                                    placeholder='Write to memo'
                                    onChange={(e) => setMemo(e.target.value)}
                                    value={memo} // 绑定value，受控组件
                                />
                                <br/>
                                <button style={{marginTop: 20}} className="ui inverted blue button">Submit Change</button>
                            </div>
                        )}
                    </Card.Content>
                </Card>
            </form>
        </div>
    )
}

关键修改说明 #

• 调整渲染的三元判断顺序：先判断isUpdated显示成功提示，再判断spinner显示加载状态，最后显示输入框和按钮
• 把输入框改成受控组件（绑定value={memo}），配合useRef清空输入，避免直接操作DOM
• 修正axios的POST请求格式，确保请求体能正确发送到服务器

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