React跨组件传值后useState增减操作出现NaN错误求助

核心问题拆解 #

1. 初始值未定义导致NaN：父组件SetSample的value初始为undefined，传递给子组件Sample的start props也为undefined，子组件初始化counter时用useState(undefined)，导致counter初始值为undefined，执行加减操作时undefined ±1直接返回NaN。
2. 子组件状态未同步props更新：子组件中const [counter = 0, setCounter] = useState(point);的写法错误——解构时的默认值仅在组件首次初始化时生效，后续父组件传递的start更新后，子组件的counter不会自动同步。
3. 非React式DOM操作：父组件用document.querySelector获取输入值，违背React数据驱动的原则，容易引发状态不一致问题。

修复后的代码实现 #

父组件（SetSample.js） #

改为受控输入组件，绑定状态并设置初始默认值：

import React, { useState } from "react";
import Sample from "../Sample/Sample";

const SetSample = () => {
    // 初始值设为0，避免传递undefined给子组件
    const [value, setValue] = useState(0);

    // 受控输入的实时处理
    const handleInputChange = (e) => {
        // 空输入或非数字转为0
        const inputNum = Number(e.target.value) || 0;
        setValue(inputNum);
    }

    const handleFormSubmit = (e) => {
        e.preventDefault();
        // 若需点击按钮才生效，可新增state存储最终设置值，此处直接实时同步
    }

    return (
        <div>
            <form onSubmit={handleFormSubmit}>
                <input 
                    type="number" 
                    value={value} 
                    onChange={handleInputChange} 
                    placeholder="输入起始值"
                />
                <button type="submit">Set start value</button>
            </form>
            <p>Start value is: {value}</p>
            <hr />

            <Sample start={value} />
        </div>
    );
}

export default SetSample;

子组件（Sample.js） #

监听props变化并同步状态，使用函数式更新确保操作基于最新状态：

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

const Sample = (props) => {
    // 初始值优先使用props.start，无有效值则设为0
    const [counter, setCounter] = useState(props.start || 0);

    // 监听start props变化，自动同步counter
    useEffect(() => {
        setCounter(props.start || 0);
    }, [props.start]);

    // 函数式更新，避免闭包陷阱，确保拿到最新状态
    const decrement = () => {
        setCounter(prev => prev - 1);
    }
    const increment = () => {
        setCounter(prev => prev + 1);
    }
    const reset = () => {
        setCounter(props.start || 0);
    }

    return (
        <div>
            <button onClick={decrement}>-</button>
            <div>{counter}</div>
            <button onClick={increment}>+</button>
            <div><button onClick={reset}>reset</button></div>
        </div>
    );
}

export default Sample;

修复逻辑说明 #

• 受控输入：通过绑定value和onChange，让React完全掌控输入值，避免直接操作DOM的不可预测性。
• 初始值兜底：父组件初始value设为0，子组件对props.start做|| 0处理，确保始终传递有效数字。
• props同步：用useEffect监听props.start的变化，自动更新子组件状态，保证父子组件数据一致。
• 函数式更新：setCounter(prev => prev ±1)确保每次操作都基于最新的counter状态，避免闭包导致的旧值引用问题。

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