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>

React太多的重新渲染问题

0 个答案: