尽管函数在记录时按预期工作，但对象数组并未传递给 useState

Question

我正在为 Mendix 创建一个可插入小部件，但在使用 useState 时遇到一些问题。 我正在尝试使用函数来初始化 useState 来创建和返回对象数组。 尽管函数按预期工作，但我的 useState 从未更新并且始终保持为空数组。

这是我的代码：

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


    function getData() {

        let dataArray: Data[] = [];
        
        props.data.items?.map((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;
    }

我正在使用 TypeScript，并为我的 useState 创建了一个类型接口：

export interface Data {
     id?: Big | number, 
     Name?: string; 
     Status? : string; 
     clicked : boolean;
     LinkedData?: [
        {
            id: Big; 
            Name : string,
            Status? : string
        }
    ] 
}

我的文件和控制台中都没有收到任何错误，但 useState 永远不会更新。函数内访问的数据是传递给小部件的数据。

我可能做错了什么？

Answer 1

我将使用空数组初始化状态，然后在 useEffect 中设置实际数据。作为依赖数组，您可以使用

[props.data.items, props.id, props.name, props.status]

。

这样，当数据可用时，状态将被（重新）设置。