React中通过数组Push与Hook添加JSX元素遇问题求助

问题根源 #

你遇到的两个问题都是Array.push()特性和React状态规则导致的：

1. 首次点击显示数组长度：push()返回的是数组更新后的长度数值，而非修改后的数组。第一次调用setState时，linksArray被赋值为数字2，渲染时自然显示这个数字而非组件。
2. 第二次点击报错：此时linksArray已经是数字类型，数字没有push()方法，因此抛出linksArray.push is not a function错误。

另外，直接修改原数组（比如linksArray.push(...)）违反了React状态不可变的原则，即便push返回数组，也可能无法触发组件重渲染。

解决方案 #

更新状态时必须创建新数组替代原数组，同时避免使用push()的返回值。可以用ES6扩展运算符(...)或Array.concat()生成新数组，同时正确更新keyNum。

修改后的代码 #

方式1：保留原有状态结构

function LinkFieldsSet() {
    return (
        <div>
            <TextField label="Text" />
            <TextField label="URL" />
        </div>
    )
}

function Links() {
    const [{linksArray, keyNum}, setState] = React.useState({
        linksArray: [<LinkFieldsSet key={1} />],
        keyNum: 1,
    });

    const handleAddClick = () => {
        const newKey = keyNum + 1;
        setState({
            keyNum: newKey,
            // 用扩展运算符生成新数组并添加组件
            linksArray: [...linksArray, <LinkFieldsSet key={newKey} />]
        });
    };

    return (
        <div>
            {linksArray}
            <AddRowsButton action={handleAddClick} />
        </div>
    )
}

方式2：拆分状态（更推荐，逻辑更清晰）

把linksArray和keyNum拆成两个独立的useState，避免嵌套对象的状态管理：

function LinkFieldsSet() {
    return (
        <div>
            <TextField label="Text" />
            <TextField label="URL" />
        </div>
    )
}

function Links() {
    const [linksArray, setLinksArray] = React.useState([<LinkFieldsSet key={1} />]);
    const [keyNum, setKeyNum] = React.useState(1);

    const handleAddClick = () => {
        const newKey = keyNum + 1;
        setKeyNum(newKey);
        // 函数式更新避免状态快照依赖问题
        setLinksArray(prevArray => [...prevArray, <LinkFieldsSet key={newKey} />]);
    };

    return (
        <div>
            {linksArray}
            <AddRowsButton action={handleAddClick} />
        </div>
    )
}

额外提示 #

如果后续需要收集表单输入数据，更推荐用数据数组（比如存储每个输入框的value）驱动渲染，而非直接存储JSX元素，这样更便于管理表单的取值和修改。

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