为啥我的 history.push 在一个功能中起作用，而在另一个功能中起作用？

Posted 2023-03-16

【中文标题】为啥我的 history.push 在一个功能中起作用，而在另一个功能中起作用？

【英文标题】：Why does my history.push work in one function but the other?为什么我的 history.push 在一个功能中起作用，而在另一个功能中起作用？

【发布时间】：2021-06-10 00:53:18

【问题描述】：

问题： 我一直在尝试在我的编辑功能上使用 props.history.push。我以前在我的添加功能上使用过它并且它有效。我有相同的导入，唯一的主要区别是我也在我的编辑函数中使用了 useEffect，而在我的添加函数中我只有 useState。还有我需要在编辑中访问每个 id 的事实。

错误： TypeError：无法读取未定义的属性“历史”

尝试： 我目前尝试使用重定向，它只是重定向而不应用更改。在按钮 onClick 中使用 history.push 也可以，但它不会应用我的更改。我经常看到的另一个解决方案是在导入 useHistory() 之后 let history=useHistory() 但这给了我一个钩子错误，我认为这可能是一个版本问题。但是，我的另一个主要问题是为什么它在我的 Add() 函数上起作用。

Add.js 点击处理程序：

function handleSubmit(e) 
  e.preventDefault();
  axios(
    method: "post",
    url: "http://localhost:5000/add",
    data: body,
  )
    .then(function (response) 
      console.log(response);
    )
    .catch(function (error) 
      console.log(error);
    );
  console.log(state);
  props.history.push("/list");

这很好用。

编辑：

function handleSubmit(e, props) 
  e.preventDefault();
  axios(
    method: "put",
    url: "http://localhost:5000/update-list/" + testid,
    data: body,
  )
    .then(function (response) 
      console.log(response);
    )
    .catch(function (error) 
      console.log(error);
    );
  console.log(state);
  props.history.push('/list');


function handleChange(e, field) 
  e.preventDefault();
  setState(
    ...state,
    [field]: e.target.value,
  );

除了使用 useEffect 之外，其余代码也几乎相同，因此我可以为字段提供默认值。这真的让我很困惑。任何帮助，将不胜感激。如果您需要更多详细信息，请告诉我！

【参考方案1】：

我在处理程序中传递道具而不是 Edit 函数本身，这就是它不起作用的原因。所以代码应该是：

function handleSubmit(e) 
    e.preventDefault();
    axios(
      method: "put",
      url: "http://localhost:5000/update-list/" + testid,
      data: body,
    )
      .then(function (response) 
        console.log(response);
      )
      .catch(function (error) 
        console.log(error);
      );
    console.log(state);
    props.history.push('/list');
  

这解决了我的问题，现在它可以工作了！我很惊讶我之前没有注意到这一点，因为我花了很长时间才弄清楚这一点。

【参考方案2】：

尝试使用window.history.push 而不是history.push 来使用该功能。如果您的函数的默认作用域不是window，您必须在函数中手动指定window 作用域。从内联 script 标记调用外部脚本文件中的函数时，通常会出现此问题。

更新：将您的 edit 代码更改为

function handleSubmit(e, props) 
  e.preventDefault();
  axios(
    method: "put",
    url: "http://localhost:5000/update-list/" + testid,
    data: body,
  )
    .then(function (response) 
      console.log(response);
    )
    .catch(function (error) 
      console.log(error);
    );
  console.log(state);
  history.push('/list');


function handleChange(e, field) 
  e.preventDefault();
  setState(
    ...state,
    [field]: e.target.value,
  );

【讨论】：

您好，感谢您的建议！不幸的是，在这样做之后，他们俩都开始犯这个错误，而且它仍然在历史上。由于反应路由器，添加功能和编辑功能都可以访问，所以一个工作和一个不工作真的让我感到困惑。 :(

我已经用你的信息更新了我的答案。

再次感谢您，但不幸的是它不起作用。我也试过做一个 windows.history.push('/list') 但它告诉我它不是一个函数。您知道是否有任何潜在原因导致它在函数中仅在单击按钮时不起作用？

更新：我在错误的函数中传递了道具，这就是它不断中断的原因。非常感谢您的建议。也帮助我学习了新事物！

@llamingo 您实际上可以在 handleSubmit 函数的定义中删除 props 参数。