React中使用useState跨组件传递API响应数据异常问题

useState跨组件传递API响应数据的可行性 #

完全可以。你当前采用的「父组件声明状态、将状态更新方法传递给子组件触发更新」的模式，是React原生跨组件状态通信的标准实现之一，数据读取异常是代码逻辑疏漏导致，和useState本身的能力无关。

异常原因 #

出现procesi打印为[object Object]、TreeList无法正常渲染数据的核心原因有两点：

• 状态不同步问题：给Kendo TreeList传值的state变量，仅在组件首次挂载时通过[...procesi]做了一次初始化。useState的初始参数只会在组件第一次渲染时生效，后续procesi通过setProcesi更新时，state.data不会自动同步，会一直停留在初始值状态。
• 返回值缺少校验：打印结果为[object Object]说明接口返回的response.data.rlista并非你预期的数组结构，未做类型校验就直接赋值，会把非预期格式的对象写入状态，导致渲染异常。

修复方案 #

按以下步骤调整代码即可：

1. 给接口返回值增加类型校验，避免非法格式数据写入状态，同时在数据加载完成后再触发树组件展示：

// InputGrid 组件行点击逻辑调整
const rowClick = async (event) => {
  const response = await Services.getTreeData(event.dataItem.snidservisnenarudzbe)
  const resList = response.data.rlista
  // 仅当返回值为数组时写入状态，否则 fallback 为空数组
  setProcesi(Array.isArray(resList) ? resList : [])
  setShowTree(true)
}

2. 增加状态同步逻辑，不要依赖useState初始值传递动态数据，通过useEffect监听procesi变化，同步更新TreeList使用的数据源：

const GridHierarchy = () => {
  const [procesi, setProcesi] = useState([]);
  const [showTree, setShowTree] = useState(false);

  const [state, setState] = React.useState({
    data: [],
    dataState: {
      sort: [{
        field: 'name',
        dir: 'asc'
      }],
      filter: []
    },
    expanded: []
  });

  // 监听procesi变更，同步更新TreeList数据源
  useEffect(() => {
    setState(prev => ({
      ...prev,
      data: [...procesi]
    }))
  }, [procesi])

  // 调试打印建议放到useEffect中，避免渲染阶段无意义执行
  useEffect(() => {
    console.log('当前procesi值：', procesi)
    console.log('树组件展示状态：', showTree)
  }, [procesi, showTree])

  return (
    <div>
      <div>
        <InputGrid setProcesi={setProcesi} setShowTree={setShowTree} />
        {showTree && (
          // 原有TreeList组件配置保持不变
          <TreeList {...state} />
        )}
      </div>
    </div>
  )
}

注意：不要直接在JSX return 块中写console.log，这类代码会在组件每次渲染时执行，容易产生冗余日志干扰调试。

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