ReactPrime TreeSelect中onChange props未定义，无法传递自定义数组

问题说明 #

使用ReactPrime TreeSelect组件时，想要通过自定义数组传递选中数据到主组件的状态中，但子组件内检测到props.onChange始终为undefined。该逻辑此前在OnValueChanged中可正常运行。

主组件原代码 #

return(
  <SubComponent>
    onChange={(val) => {
      console.log("here")
      if (val)
        setFormDataDetails({
          ...formDataDetails,
          [item.NS_CI_ID]: val,
        });
    }}
  </SubComponent>
);

子组件原代码 #

const nodeStateCh = (e) => {
  setSelectedNodeKeys(e.value)
  let rArray= []
  rArray.push("test")
  if (props.onChange) {  // 此处props.onChange为undefined
    props.onChange(returnArray)
  }
}

return (
  <div className="card flex justify-content-center">
    <TreeSelect
      value={selectedNodeKeys}
      onChange={nodeStateCh}
      options={nodes}
      metaKeySelection={false}
      filter
      className="md:w-20rem w-full"
      selectionMode="checkbox"
      display="chip"
      placeholder="Select Items"
    >
      {' '}
    </TreeSelect>
  </div>
)

问题原因 #

1. 主组件props传递错误：当前将onChange作为SubComponent的子元素传入，而非组件属性。React中组件props需通过标签属性传递，而非子节点。
2. 子组件变量名不一致：子组件中定义的数组是rArray，但调用props.onChange时传入的是未定义的returnArray。

修复方案 #

1. 修正主组件props传递方式 #

将onChange作为SubComponent的属性传递，而非子元素：

return(
  <SubComponent
    onChange={(val) => {
      console.log("here")
      if (val)
        setFormDataDetails({
          ...formDataDetails,
          [item.NS_CI_ID]: val,
        });
    }}
  />
);

2. 修正子组件变量名 #

将调用props.onChange时的参数改为实际定义的rArray：

const nodeStateCh = (e) => {
  setSelectedNodeKeys(e.value)
  let rArray= []
  rArray.push("test")
  if (props.onChange) {
    props.onChange(rArray)
  }
}

完成以上修改后，子组件的props.onChange即可正常获取到主组件传递的回调函数，实现数组数据向主组件状态的传递。

内容的提问来源于stack exchange，提问作者E.YILDIRIM