React函数组件中如何正确向作为props传入的字符串数组追加元素？

1. 直接触发语法报错的问题 #

你写的props.setLog(props.log => [...props.log, "Loaded child component."])存在语法错误：
函数式状态更新的回调，形参位置必须是合法的独立变量标识符，不能写props.log这类带属性访问的表达式。TypeScript解析时，会把括号里的props.log识别为传入setLog的第一个普通实参，后续突然出现的箭头函数语法无法被匹配，直接抛出',' expected的语法类报错。

2. 类型定义缺失带来的校验失效 #

你在ChildComponent的Props接口里，把setLog的类型定义为宽泛的Function，完全丢失了这个状态更新函数的具体签名信息——TypeScript不知道这个函数能不能接收回调参数、对参数类型有什么要求，哪怕语法写对了，也没法提供准确的类型提示。

第一步：为setLog补充准确的TS类型 #

useState返回的状态更新函数，标准类型是React.Dispatch<React.SetStateAction<你的状态类型>>，替换掉之前宽泛的Function类型：

interface Props {
    log: string[];
    setLog: React.Dispatch<React.SetStateAction<string[]>>;
}

这个类型会自动匹配父组件useState<string[]>生成的setLog的签名，既支持直接传入新数组作为更新值，也支持传入带旧状态入参的回调函数。

第二步：修正状态更新的调用写法 #

把回调里的形参改为独立的局部变量，这个形参会在更新执行时，由React自动传入对应时刻的最新状态快照：

useEffect(() => {
    // 形参prevLog是React主动传入的最新旧状态，不需要自己引用props里的log
    setLog(prevLog => [...prevLog, "Loaded child component."]);
}, []);

ParentComponent.tsx #

父组件代码本身无问题，无需修改：

import React, { useState } from 'react';
import { ChildComponent } from './ChildComponent';

export function ParentComponent() {
    const [log, setLog] = useState<string[]>([]);

    return(
        <ChildComponent log={log} setLog={setLog} />
    );
};

ChildComponent.tsx #

import React, { useEffect } from 'react';

interface Props {
    log: string[];
    setLog: React.Dispatch<React.SetStateAction<string[]>>;
};

export function ChildComponent(props: Props) {
    const { log, setLog } = props;

    useEffect(() => {
        setLog(prevLog => [...prevLog, "Loaded child component."]);
    },[]);

    return (
        <div>
            {log.map(logItem => <p key={logItem}>{logItem}</p>)}
        </div>
    );
};

• 不要使用宽泛的Function类型标注React的状态更新函数，会完全丢失类型校验能力，后续开发中极易出现参数不匹配的问题。
• 函数式更新的回调入参是更新执行时的最新状态快照，不要手动捕获props里的旧状态引用，否则会遇到闭包捕获旧值、更新不生效的问题。

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