"Apple"과 "Banana"라는 두 개의 탭이 있는 앱이 있습니다. 각 탭에는 useState를 사용하여 구현된 카운터가 있습니다.
혼란스럽게도 카운터 상태는 두 탭 간에 공유됩니다!
한 탭에서 카운터를 늘린 다음 다른 탭으로 전환하면 카운터도 변경됩니다.
이게 왜요?
이것은 나의 완전한 앱입니다:
으아악버전:
const Tab = ({ name, children = [] }) => {
const id = uuid();
const [ count, setCount ] = useState(0);
const onClick = e => {
e.preventDefault();
setCount(c => c + 1);
};
const style = {
background: "cyan",
margin: "1em",
};
return (
<section style={style}>
<h2>{name} Tab</h2>
<p>Render ID: {id}</p>
<p>Counter: {count}</p>
<button onClick={onClick}>+1</button>
{children}
</section>
);
};
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Adam은 여기서 무슨 일이 일어나고 있는지에 대해 좋은 설명과 답변을 제공합니다. URL 경로가 변경된다고 해서 동일한 React 구성 요소를 분해하고 다시 설치하지 않는 최적화입니다. React 키를 사용하면 React가
Tab组件，从而“重置”count상태를 다시 마운트하도록 강제하여 이 문제를 확실히 해결할 수 있습니다.상태를
으아아아name属性从"apple"更改为"banana"时，保持挂载路由组件并简单地重置count할 때는 다른 방법을 사용하는 것이 좋으며 그 반대의 경우도 마찬가지입니다.이렇게 하면 RRD 최적화가 귀하에게 불리하지 않고 귀하에게 도움이 될 것입니다.
좋아요가
. 이는 일부 내부 구성 요소 논리를 외부 세부 정보와 결합한다는 점에 유의하세요.name这样的传递道具可以从中获取提示，则可以使用location.pathname없으면
예: 🎜 으아아아이것은 반응 라우터 돔의
Switch과 함께 작동합니다궁극적으로 경로를 전환하더라도 구성 요소 트리는 동일하게 유지됩니다.
항상 라우터 -> 스위치 -> 라우팅 -> 탭
Switch 작동 방식으로 인해 React는 새로운 구성 요소를 "설치"하지 않으며 가능하기 때문에 이전 트리를 재사용합니다.
이전에 이런 문제가 있었던 적이 있는데 해결책은 예를 들어
으아악Tab或Route上。我通常将其添加到Route에 키를 추가하는 것이었습니다. 제 생각에는 키를 추가하는 것이 더 합리적이라고 생각합니다.이 스택 블리츠를 확인해 보세요:
https://stackblitz.com/edit/react-gj5mcv ?file=src/App.js
물론 언로드되면 각 탭에서 상태가 재설정되는데, 이는 이상적일 수도 있고 아닐 수도 있습니다. 하지만 이에 대한 해결책은 물론(이것이 문제라면) 평소와 같이 상태를 높이는 것입니다.