在不同的按钮中调用相同的函数，并且两者都在 Reactjs、javascript 中给出不同的输出？答案

【问题标题】：Same function called in different buttons and both are giving different output in Reactjs, javascript?在不同的按钮中调用相同的函数，并且两者都在 Reactjs、javascript 中给出不同的输出？
【发布时间】：2021-08-10 04:21:18
【问题描述】：

这是我的代码

const [datatable, setDatatable] = useState({
  columns: [
    {
      label: 'Title',
      field: 'title',
      width: 200,
      attributes: { ariacontrols: 'DataTable', 'aria-label': 'Name' },
    },
    { label: 'Language', field: 'language', width: 500 },
    { label: 'Description', field: 'description', width: 200 },
    { label: '', field: 'publish', sort: 'asc', width: 300 },
  ],
  rows: [{ _id: '', title: '', description: '', language: '', publish: '' }],
});

useEffect(() => {
  axios.get('/admin/challenges').then((response) => {
    data = response.data;
    data.map((item) => {
      item.publish = (
        <Button
          onClick={() => {
            viewPage(item._id);
          }}
          size="small"
          variant="outlined"
          color="primary"
        >
          view
        </Button>
      );
    });
    setDatatable({
      ...datatable,
      rows: data,
    });
  });
}, []);

// Event handler for button

const viewPage = () => {
  console.log(datatable);
};

我创建了单独的按钮并将相同的函数“viewPage”作为处理程序传递。

return (
  <div>
    <button onClick={viewPage}>Hello</button>
    <div>
      //a datatable('state datable is passed as props') where each row has button and its event handler is 'viewPage'                  
      <MDBDataTableV5
        hover
        entriesOptions={[5, 20, 25]}
        entries={5}
        pagesAmount={4}
        data={datatable}
      />
    </div>
  </div>
);

但是当我点击按钮时，两者都显示不同的结果，我在表中声明的按钮只给了我初始状态作为输出，但另一个按钮给出了正确的更新状态。所以我对它的工作感到困惑。那么我在这里缺少什么以及为什么？？？

【问题讨论】：

标签： javascript reactjs onclick state

【解决方案1】：

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

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

【讨论】：

如果你想使用箭头功能，你可以改变 onClick 部分，如下所示。 ``` ```
嗨@anas_m__！你还在为这个问题苦苦挣扎吗？如果是这样，请尝试使用self.viewPage(item.id) 并让我知道它是否有效。

【解决方案2】：

这可能是由于在 useEffect 钩子中添加了按钮。 viewPage 函数使用 datatable 变量。您可能需要将 viewPage 添加到 useEffect 的依赖项中。但这不起作用，因为您会多次提出请求。您可以将 useEffect 钩子 api 调用的结果存储到状态变量中，并在返回 jsx 时进行映射。

【讨论】：