为什么我的 history.push 在一个函数中起作用，而在另一个函数中起作用？

Question

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

错误： 类型错误：无法读取未定义的属性 'history'

尝试次数： 我目前尝试使用 Redirect，它只是在不应用更改的情况下重定向。同样使用 history.push 在按钮 onClick 中工作，但它不应用我的更改。我经常看到的另一个解决方案是在导入 useHistory() 之后让 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 之外，其余代码也几乎相同，因此我可以为字段提供默认值。这让我很困惑。任何帮助，将不胜感激。如果您需要更多详细信息，请告诉我！

Answer 1

尝试使用 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,
  });
}

Answer 2

我在处理程序中传递了 props 而不是 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');
  }

这解决了我的问题，现在可以使用了！我很惊讶我没有早点注意到这一点，因为我花了很长时间才弄明白。

为什么我的 history.push 在一个函数中起作用，而在另一个函数中起作用？

Why does my history.push work in one function but the other?

javascript

browser-history

reactjs

react-router-dom

react-functional-component