React 中 Object 中的方法属性不能被调用“..is not a function”

Question

所以，我的项目中有以下数据/对象结构：

const stack = [
   {
     id: 1,
     img: "pic.png",
     methods: {
       test: function () {
          console.log("Hello World");
       },
     },
   },
];

const [data, setData] = useState(stack);

堆栈数组包含动态数量的对象。所有对象都具有相同的结构，包括包含函数的方法对象。

现在我要做的是为堆栈数组中的每个对象调用测试函数，如下所示：

const [data, setData] = useState(stack);

data.forEach((el, i) => {
   el.methods.test(); //Returns "not a function error"
});

// This just console.logs an empty object:

data.forEach((el, i) => {
   console.log(el.methods); //Returns "{}"
});

const { useState } = React;

const stack = [
    {
        id: 1,
        img: "pic.png",
        methods: {
            test: function () {
                console.log("Hello World");
            },
        },
    },
];

const Example = () => {
    const [data, setData] = useState(stack);

    data.forEach((el, i) => {
        el.methods.test(); //Returns "not a function error"
    });

    return <div>x</div>;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

我做错了什么？我想我已经检查了我知道的所有资源。并从许多文章中复制粘贴但无法正常工作。 这是 React 问题吗，因为堆栈是在 useState() 属性中初始化的？