在不同的按钮中调用相同的函数，并且在Reactjs和javascript中给出不同的输出？

这是我的密码

const[datatable，setDatatable]=useState({
栏目：[
{
标签：“标题”，
字段：“标题”，
宽度：200，
属性：{ariacontrols:'DataTable'，'aria label'：'Name'}，
},
{标签：“语言”，字段：“语言”，宽度：500}，
{标签：'Description'，字段：'Description'，宽度：200}，
{标签：''，字段：'publish'，排序：'asc'，宽度：300}，
],
行：[{U id:''，标题：''，描述：''，语言：''，发布：'}]，
});
useffect（（）=>{
获取（'/admin/challenges'）。然后（（响应）=>{
data=response.data；
data.map（（项目）=>{
item.publish=(
{
查看页面（项目编号）；
}}
size=“小”
variant=“概述”
color=“primary”
>
看法
);
});
可设置数据表({
…数据表，
行：数据，
});
});
}, []);
//按钮的事件处理程序
常量视图页=（）=>{
console.log（数据表）；
};

我创建了Separate按钮，并传递了与处理程序相同的函数“viewPage”

返回(
你好
//一个数据表（“状态数据表作为道具传递”），其中每行都有按钮，其事件处理程序为“viewPage”
);

但当我单击按钮时，两个按钮都显示不同的结果，我在表中声明的按钮只提供初始状态作为输出，而另一个按钮提供正确的更新状态。

---

所以我对它的工作原理感到困惑。那么我在这里缺少什么，为什么呢？

这是因为在调用render函数时，事件处理程序重新定义了。 因此，重新呈现的元素有一个新的eventHandler函数，而未呈现的元素有一个旧的eventHandler函数。您可以使用箭头函数或回调函数

<button onClick={() => {
  console.log(datatable)
}} >Hello</button>

{
console.log（数据表）
}}>你好

这可能是由于在useffect挂钩中添加了按钮。viewPage函数使用datatable变量。您可能需要将viewPage添加到useEffect的依赖项中。但是这不起作用，因为你会多次提出请求。

---

您可以将从useEffect钩子api调用中获得的结果存储到状态变量中，并在返回jsx时映射。

如果您想使用arrow函数，您可以更改onClick部分，如下所示{console.log（datatable）}>您好```Hi@anas\u m\uuu！你还在努力解决这个问题吗？如果是这样，请尝试使用

self.viewPage（item.id）

并告诉我它是否有效。