错误：无效的挂钩调用 - 在 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} />