在不同的按钮中调用相同的函数，并且两者在 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>
);

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

Answer 1

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