React子组件FileTrees接收props的两类异常问题求助

问题场景 #

我写了一个渲染Tree的React函数组件FileTrees，遇到两个异常问题：

1. 当组件按以下形式定义时：

export function FileTrees (structures, setValue){
   // ... 内部逻辑
}

• 能正常渲染出data，但调用setValue()时会报错：setValue不是函数

2. 当改用解构props的方式定义时：

export function FileTrees ({structures, setValue}){
   // ... 内部逻辑
}

• setValue()能正常调用，structures的值也正确，但data始终是空数组[]

组件完整代码如下：

export function FileTrees ({
  structures,
  setValue,
}: {
  structures: Structure;
  setValue: React.Dispatch<React.SetStateAction<string>>;
}
 ) {
  let [data, setData] = useState<Array<{}>>([]);
  React.useEffect(() => {
    const incoming = convertObject(structures);
    setData(incoming);
  }, [structures]);
  console.log(structures)

  return (
    <Tree
      children={null}
      data={data}
      onUpdate={handleUpdate}
      onNodeClick={(node) => {
        if (node.node.type === "file") {
          let path = node.node?.path;
          let name = node.node?.name; 
          setValue("hi mom")
        }}}
    />
  );
}

// 父组件调用
<FileTrees structures={struct} setValue={setValue}/>

问题根源 #

问题1的原因 #

React函数组件的第一个参数是完整的props对象，不是拆分后的单个参数。当你写FileTrees(structures, setValue)时：

• 第一个参数structures实际是包含structures和setValue属性的完整props对象
• 第二个参数setValue为undefined，调用时自然会报错“不是函数”
• 此时convertObject(structures)处理的是整个props对象，刚好这个函数能从中解析出数据，所以data看起来正常，但这是错误参数传递导致的巧合

问题2的原因 #

改用解构后，structures才是你真正传入的数组，但convertObject(structures)返回了空数组，说明这个函数的逻辑无法正确处理数组类型的输入。

解决方案 #

1. 固定组件props接收方式 #

必须使用解构（或通过props对象访问属性），确保拿到正确的参数：

// 推荐写法：解构props
export function FileTrees ({ structures, setValue }: {
  structures: Structure;
  setValue: React.Dispatch<React.SetStateAction<string>>;
}) {
  // ... 组件逻辑
}

// 备选写法：通过props对象访问
export function FileTrees (props: {
  structures: Structure;
  setValue: React.Dispatch<React.SetStateAction<string>>;
}) {
  const { structures, setValue } = props;
  // ... 组件逻辑
}

2. 排查convertObject函数逻辑 #

这是data为空的核心问题，你需要：

• 打印输入输出，确认convertObject的处理结果：

React.useEffect(() => {
  console.log('传入的structures:', structures);
  const incoming = convertObject(structures);
  console.log('convertObject返回结果:', incoming);
  setData(incoming);
}, [structures]);

• 检查convertObject是否支持处理数组类型，比如是否存在只处理对象的判断逻辑，导致数组被直接返回为空。

3. 验证父组件传入的struct #

确认父组件中的struct不是空数组，且结构符合convertObject函数的处理要求。

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