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

Question

这是我的代码

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>
);

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

Answer 1

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

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

Answer 2

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

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

Same function called in different buttons and both are giving different output in Reactjs, javascript?

javascript

state

onclick

reactjs