javascript - React太多的重新渲染问题

我的应用程序中有一些卡片，这些卡片可以通过点击而转到其他页面。所以我有一个包含这样的按钮的主要组件：

function MainComponent(props) {
.
.
.
  const handleClick = (key) => {
    history.push("/exampleurl/" + key);
  };

然后，根据传递的密钥，我必须发出一个请求，该请求提供了一些显示该消息所需的信息。默认情况下，我的初始状态为null，当它完成请求时，它将变为我得到的对象。但是，一旦我点击卡片，就会出现重新渲染错误。

function MyComponent(props) {

    let { key } = useParams();

    const [myObject, setMyObject] = React.useState(null)

    useEffect(() => {

        axios.get('/myendpoint/' + key).then( response => {
            let myObject = response.data
            setMyObject(myObject)
        })
    }, [key])

我想解决方案是避免更改状态时更新键值。但是我没有找到解决这个麻烦的方法。

编辑：导致组件的路由：

          <Route path="/inbox">
            <MainComponent />
          </Route>
          <Route path="/exampleurl/:key">
            <NewComponent />
          </Route>

最佳答案

我认为问题与handleClick函数有关。

每次调用此方法时，都将新条目推入历史记录堆栈。分析定义的路线并呈现链接的组件。在您的情况下，它是相同的组件，但是我不确定路由器是否能够确定它，因此我希望重新渲染。

可能的解决方案是包括另一个状态，该状态负责通知组件当前在屏幕上显示的obj。因此，key将仅对route参数负责，而此新状态将对内部导航负责。

function MyComponent(props) {

    let { key } = useParams();

    const [myObject, setMyObject] = React.useState(null)
    const [displayedObj, setDisplayedObj] = React.useState('');

    useEffect(() => {

        axios.get('/myendpoint/' + key).then( response => {
            let myObject = response.data
            setMyObject(myObject)
            setDisplayedObj(key)
        })
    }, [key, displayedObj]) // we listen for displayedObj too

然后在handleClick中更新此新状态。这将触发useEffect，因此将myObject状态更新为新值：

const handleClick = (key) => {
    setDisplayedObj(key);
    // This will trigger the useEffect and refresh
    // the data displayed without reloading the page
};