Mendix可插拔Widget：useState无法获取函数返回对象数组的问题

你的问题主要出在两个核心点：

• useState初始函数的执行限制：你将getData作为useState的初始值传入，这个函数只会在组件首次渲染时执行一次。后续哪怕传入的props.data.items更新，它也不会重新运行——如果首次渲染时props还未拿到数据，状态就会一直保持为空数组。
• 遍历方式的语义问题：你用map遍历props.data.items，但完全没有利用map返回新数组的特性，而是手动往dataArray里push元素，这种场景用forEach更贴合语义，也更直观。

修复方案1：用useEffect监听props更新状态（需要修改状态时用） #

如果需要把数据存在state中（比如要修改clicked这类字段），可以通过useEffect监听props的变化，每当props更新时重新计算数据并同步到state：

const [data, setData] = useState<Data[]>([]);

useEffect(() => {
  const processData = () => {
    const dataArray: Data[] = [];
    props.data.items?.forEach((item) => {
      dataArray.push({
        id: props.id.get(item).value?.toNumber(),
        Name: props.name.get(item).value?.toString(),
        Status: props.status.get(item).value?.toString(),
        clicked: false,
      });
    });
    return dataArray;
  };

  setData(processData());
}, [props.data.items, props.id, props.name, props.status]); // 务必加全所有用到的props依赖，避免更新遗漏

修复方案2：用useMemo缓存计算结果（仅展示数据时用） #

如果只是需要展示转换后的数据，不需要修改clicked这类状态字段，可以不用useState，直接用useMemo缓存计算结果，props变化时会自动重新计算：

const data = useMemo(() => {
  const dataArray: Data[] = [];
  props.data.items?.forEach((item) => {
    dataArray.push({
      id: props.id.get(item).value?.toNumber(),
      Name: props.name.get(item).value?.toString(),
      Status: props.status.get(item).value?.toString(),
      clicked: false,
    });
  });
  return dataArray;
}, [props.data.items, props.id, props.name, props.status]);

额外提示 #

• 依赖数组要完整：不管用useEffect还是useMemo，都要把所有用到的props加入依赖项，否则React可能不会触发预期的更新。
• 注意Big类型的精度：你的Data接口中id支持Big类型，要确保调用toNumber()时不会出现精度丢失问题（如果数值过大的话）。

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