React的重新渲染问题太多

Question

我的应用程序中有一些卡片，可以通过点击进入另一个页面。所以我有一个主要组件，它包含这样一个按钮：

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>

Answer 1

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

每次调用此方法时，都会向历史堆栈中推送一个新条目。分析已定义的管线并渲染链接的组件。在您的情况下，它是同一个组件，但我不确定路由器是否能够确定它，因此我希望重新渲染。

也许一个解决方案是包括另一个状态，该状态负责通知屏幕上显示的当前obj的组件。因此，key将只负责路线参数，而这个新状态将负责内部导航。

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

然后在CCD_ 3中我们更新这个新状态。这将触发useEffect，从而将myObject状态更新为新值：

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