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仅负责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
};