useState가 서로 다른 props를 가진 경로 간에 공유되는 이유는 무엇입니까?

Question

"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>
  );
};

Answer 1

Adam은 여기서 무슨 일이 일어나고 있는지에 대해 좋은 설명과 답변을 제공합니다. URL 경로가 변경된다고 해서 동일한 React 구성 요소를 분해하고 다시 설치하지 않는 최적화입니다. React 키를 사용하면 React가 Tab 组件，从而“重置”count 상태를 다시 마운트하도록 강제하여 이 문제를 확실히 해결할 수 있습니다.

상태를 name 属性从 "apple" 更改为 "banana" 时，保持挂载路由组件并简单地重置 count할 때는 다른 방법을 사용하는 것이 좋으며 그 반대의 경우도 마찬가지입니다.

으아아아

이렇게 하면 RRD 최적화가 귀하에게 불리하지 않고 귀하에게 도움이 될 것입니다.

좋아요가 name 这样的传递道具可以从中获取提示，则可以使用 location.pathname없으면

. 이는 일부 내부 구성 요소 논리를 외부 세부 정보와 결합한다는 점에 유의하세요.

예: 🎜 으아아아

Answer 2

이것은 반응 라우터 돔의 Switch과 함께 작동합니다

궁극적으로 경로를 전환하더라도 구성 요소 트리는 동일하게 유지됩니다.

항상 라우터 -> 스위치 -> 라우팅 -> 탭

Switch 작동 방식으로 인해 React는 새로운 구성 요소를 "설치"하지 않으며 가능하기 때문에 이전 트리를 재사용합니다.

이전에 이런 문제가 있었던 적이 있는데 해결책은 예를 들어 Tab 或 Route 上。我通常将其添加到 Route에 키를 추가하는 것이었습니다. 제 생각에는 키를 추가하는 것이 더 합리적이라고 생각합니다.

으아악

이 스택 블리츠를 확인해 보세요:

https://stackblitz.com/edit/react-gj5mcv ?file=src/App.js

물론 언로드되면 각 탭에서 상태가 재설정되는데, 이는 이상적일 수도 있고 아닐 수도 있습니다. 하지만 이에 대한 해결책은 물론(이것이 문제라면) 평소와 같이 상태를 높이는 것입니다.