錯誤：無效的掛鈎調用 - 在 react-router useHistory 中

Question

我在class 組件內使用function 組件，並以編程方式使用react-router重定向onClick 。

這有效：

const Child => () => {
  let history = useHistory();
  return (
    <div onClick={() => history.push('/somewhere')}>Click me!</div>
  )
}

class App extends React.Component {

  render() {
    return <div><Child /></div>
  }
}

但是，如果我有N個孩子，並且我會執行.map類的操作：

class App extends React.Component {

  const children = ['a', 'b'].map(Child);
  render() {
    return <div>{children}</div>
  }
}

然后我得到：

錯誤：無效的掛鈎調用。 鈎子只能在 function 組件的主體內部調用。

我不明白為什么這是一個錯誤。 如果我忽略該規則，如下所示：

// eslint-disable-next-line react-hooks/rules-of-hooks
let history = useHistory();

那么它可以工作，但是我在做一些反模式嗎？ 我確實在 function 組件的主體內部調用了鈎子......但它沒有被直接呈現為 JSX 元素的直接子元素。

在這種情況下如何使用useHistory鈎子？ 我究竟做錯了什么？

Answer 1

問題：

是.map(Child) ，這里Child被認為是simple function而不是functional component ，並且 map function 直接調用它

因此，react 會拋出錯誤：只能在 function 組件的主體內部調用 Hooks。

與以下代碼片段相同：

 function square(a) { return a*a; } console.log([1,2,3].map(square))

---

解決方案：

改變這個：

children = ['a', 'b'].map(Child);

至：

children = ['a', 'b'].map((e,i) => <Child key={i}/>); // <--- provide key also 

工作演示：

Answer 2

const children = ['a', 'b'].map(Child); 不正確將其替換為：

class App extends React.Component {
  children = ["a", "b"];
  render() {
    return children.map((el, i) => <Child key={i} />);
  }
}

Answer 3

在您的 App.js 文件中將<Route exact path='/' render={Content} />更改為<Route exact path='/' component={Content} />