React: 버그: 수정하기 너무 어렵습니다. "다른 구성 요소의 함수 본문 내부에서 구성 요소를 업데이트할 수 없습니다."

이 경고를 더 일찍 추가했으면 합니다. 죄송합니다. Hooks의 도입으로 인한 실수였습니다. 나는 이것이 Hooks를 사용하는 새로운 코드로 인해 발생해야 한다고 생각합니다. 왜냐하면 훨씬 더 일찍 클래스에 대해 이미 동일한 경고가 있었기 때문에 이전 코드에서는 이미 이 경고를 보았을 것입니다.

이것은 향후 버전의 React에서 하드 실패를 시작할 가능성이 높습니다. 의도적이든 아니든(이 패턴에는 많은 버그가 있었습니다). 따라서 관계없이 결국 이전 버전에 갇힐 수 있습니다. 고칠 수 없다면 이전 버전의 React에 고정하는 것이 좋습니다.

그러나 라이브러리 작성자의 도움을 받아 수정 버전을 게시할 수 있는지 확인하는 것을 포함하여 이러한 문제를 최대한 쉽게 수정할 수 있도록 도와드리고자 합니다.

Chrome 콘솔에서 작은 > 화살표를 확장하면 추가 스택 추적도 표시되어야 합니다(스크린샷의 구성 요소 스택 외에). 그것도 올려주실 수 있나요? 그러면 렌더링에서 부작용을 일으키는 정확한 호출 사이트가 표시됩니다.

나와 함께 이것은 내가 formik을 사용할 때 나타납니다.

@sebmarkbage 답변 감사합니다. >를 클릭한 후 나타나는 스택 추적은 우스꽝스럽습니다. 200개 이상의 항목이 포함되어 있습니다!

거기에 붙여 넣거나 pastebin에 대한 링크를 제공하려고했지만 다른 방향으로 시도했습니다. 일부 사용된 라이브러리의 Github 문제를 살펴보고 용의자 중 하나가 redux-form( https://github.com/redux-form/redux-form/issues/4619) 이라는 것을 알았습니다

그러나 여전히 이 문제를 닫지 않도록 요청하고 다른 개발자에게 이러한 오류를 일으키는 라이브러리를 여기에서 언급할 것을 제안합니다.

@RodolfoSilva 그것이 formik에 의한 것이라고 확신합니까? 그렇다면 거기에서 문제를 만들고 여기에 대한 링크를 게시할 수 있습니까? 목록에 항목이 두 개 이상 포함될 경우 첫 번째 메시지 시작 부분에 이러한 문제 목록을 만들겠습니다.

이것은 정말 빨리 해결되어야 합니다. 업그레이드를 불가능하게 만듭니다. 오류 추적은 거의 불가능합니다.

흠. 오류 메시지에서 찾을 줄을 설명하는 것이 도움이 될지 궁금합니다.

이 경우 찾을 첫 번째 줄은 dispatchAction 뒤의 줄입니다. 그것이 React를 호출하는 것이어야 합니다.

@RodolfoSilva 공유 할 수 있는 FormItemInput.js 의 출처를 게시할 수 있습니까? 71행에서 dispatch 또는 setState를 호출하는 것 같습니다.

오류를 일으키는 코드 행을 정확히 포함하도록 이 오류 메시지를 수정하는 것이 필수적이라고 생각합니다. 문제의 원인이 로컬 코드인지 라이브러리 코드인지 정확히 파악하는 것은 거의 불가능합니다. react-redux 및 react-router와 같은 외부 가능성 이 매우

나는 여기서 React-Redux가 잘못이 아니라고 확신하지만 오류 메시지와 구성 요소 스택이 실제로 무슨 일이 일어나고 있는지 알기 어렵게 만든다는 데 동의했습니다.

나는 Redux-form과 같은 문제에 직면해 있습니다!

나는 같은 문제가 있으며 내 redux 필드 에 처음으로 쓸 때 또는 모든 것을

나는 그 문제도 가지고 있습니다. 이것은 내 구성 요소입니다.

`const [가격, setPrice] = useState(0);

const updatePrice = (newPrice) => {
setPrice(newPrice)
}
< CardContainer onPriceUpdated={updatePrice} > CardContainer >
`

따라서 이 경우 내 CardContainer 구성 요소는 가격이 업데이트되고 상위 구성 요소가 새 왕자를 렌더링할 때 상위 구성 요소에 알립니다.
그래서 React는 내가 다른 구성 요소의 기능을 사용하여 구성 요소의 상태를 업데이트하려고 한다고 경고하는 것 같습니다.
나는 반응에 익숙하지 않으므로 이것이 React 패턴인지 또는 실제로 버그인지 확실하지 않습니다.

이 경고를 해결하기 위한 제안 사항이 있으면 감사하겠습니다.``

@l0gicgate

오류를 일으키는 코드 행을 정확히 포함하도록 이 오류 메시지를 수정하는 것이 필수적이라고 생각합니다.

JavaScript로 할 수 있는 일에는 한계가 있습니다. 그러나 모든 정보는 브라우저에서 볼 수 있는 스택에 있습니다 . React 내부에 있는 줄을 건너뛰기만 하면 됩니다.

JavaScript 스택을 보려면 오류 메시지 옆에 있는 작은 화살표 를 합니다 .

예를 들어 이전의 이 스크린샷을 보십시오.

스택을 파헤치는 것이 약간 성가신 일이지만 처음 몇 프레임을 건너뛰는 것은 그렇게 어렵지 않아야 합니다. 바로 다음 프레임이 문제의 원인입니다. 이 경우 Formik 라이브러리 내부에 있는 것처럼 보입니다. 따라서 문제를 제기할 수 있습니다.

@martinezwilmer 이 예제는 너무 작아서 도움이 되지 않습니다. 샌드박스를 만들어주세요.

미래의 댓글 작성자에게. 새로운 경고가 표시되는 것이 답답하다는 점을 이해합니다. 그러나 코드에 버그를 일으킬 가능성이 있는 합법적인 문제를 지적

스택 추적에서 출처를 이해할 수 없는 경우 스크린샷을 게시하거나 재생산 샌드박스를 생성해 주시면 도와드리겠습니다. 대부분은 몇 개의 라이브러리에서 가져온 것일 수 있으므로 가장 생산적인 방법은 이러한 경우를 줄이고 해당 라이브러리에 문제를 제기하는 것입니다.

다들 감사 해요.

여기에서 경고와 관련된 정확한 라인을 찾기가 어렵습니다.

@gaearon 또 한가지 팁이 있나요?

여기에서 경고와 관련된 정확한 라인을 찾기가 어렵습니다.

무엇이 그것을 어렵게 만드는가? 위에서 언급했듯이 오른쪽에 "반응"이라고 표시되지 않은 첫 번째 줄입니다. 이 경우 Redux의 connectAdvanced 입니다. 관리자가 이를 볼 수 있도록 React Redux에 문제를 제출하세요.

내가 upthread에 대해 말했듯이 여기서 일어나는 모든 것이 React-Redux의 문제라면 _매우_ 놀랄 것입니다.

즉, 처음에 이 메시지를 트리거한 원인이 정확히 무엇인지조차 모르겠습니다. 오류 메시지가 무엇을 말하는지 반쯤 이해했지만 실제로 어떤 종류의 앱 코드 패턴이 해당 동작의 예가 될까요?

나는 최근이에 달려 수정은 포장 된 setState 에서 핸들러 호출 사이트 useEffect 과 같이 : https://github.com/airbnb/lunar/commit/db08613d46ea21089ead3e7b5cfff995f15c69a7#diff (-1c3bdd397b1ce5064142488877045306R56 onChange 및 onSubmit 는 체인 위쪽에서 setState 를 사용합니다.

@martinezwilmer onPriceUpdated 는 어디에서 호출되나요? useEffect 포장해 볼까요?

urql 대해 동일한 문제가 발생하는 것 같습니다.

우리는 업데이트를 조정하기 위해 use-subscription + wonka(스트림용)를 사용하고 있지만 업데이트는 동기적으로 올 수 있습니다. 여기서 우리는 이미 todos 가져왔으므로 Open 버튼을 클릭하면 결과가 즉시 팝업되어야 하지만 이것이 다음 오류를 유발하는 것 같습니다.

우리의 경우 이것이 의도된 것이므로 동기화 결과에 대해 fetching: true 를 표시할 수 없으므로 인터페이스가 불안정합니다.

이것은 urql , Apollo 와 같은 타사 라이브러리에서 점점 더 많이 나타나기 시작했습니다.

나는 이것에 부딪쳤고 몇 시간 동안 문제가 내 코드에 있다고 가정했습니다. 압축된 스택 추적은 내 구성 요소를 가리키며, 내가 명시적으로 오류를 _did_ 했을 때 확장된 스택 추적에서 타사 라이브러리를 보는 것은 드문 일이 아닙니다. 이 특정 경고에 대한 (제한적이지만) 연구에서 대부분의 개발자가 이 문제를 스스로 일으키는 것이 아니라 발생하는 코드에 의존하는 것으로 보입니다. 일반적으로 업스트림 버그가 아니라고 가정하는 것이 좋지만 업스트림 버그인 경우 코드에서 존재하지 않는 문제를 추적하는 데 시간을 낭비하는 것은 다소 실망스럽습니다. 일반 사용자가 자신이 작성한 코드인지, 문제를 일으킨 코드에 의존하는지 판단할 수 있도록 React가 할 수 있는 일이 있습니까?

Apollo 문제에서 내가 주목하는 한 가지는 다음과 같습니다.

경고의 스택 추적은 변경 사항에 의해 다시 렌더링되는 구성 요소가 아니라 변경 사항을 초기화한 구성 요소를 보여줍니다.

이것이 맞다면 React가 여기에 더 많은 정보를 제공할 수 있습니까? 시작 구성 요소와 업데이트를 유발한 구성 요소를 모두 알려주시겠습니까?

@hugo 와 마찬가지로 새로운 Ionic 애플리케이션을 테스트할 때 다음과 같은 문제 가 발생했습니다.

1. npx ionic start demo sidemenu --type=react
2. react-scripts test

실제로 원인은 스택 트레이스의 중간과 하단에 묻혀 있습니다.

console.error node_modules/react-dom/cjs/react-dom.development.js:88
    Warning: Cannot update a component from inside the function body of a different component.
        in Route (at App.tsx:37)
        in View (created by StackManagerInner)
        in ViewTransitionManager (created by StackManagerInner)
        in ion-router-outlet (created by IonRouterOutlet)
        in IonRouterOutlet (created by ForwardRef(IonRouterOutlet))
        in ForwardRef(IonRouterOutlet) (created by StackManagerInner)
        in StackManagerInner (created by Context.Consumer)
        in Unknown (created by Component)
        in Component (created by ForwardRef(IonRouterOutlet))
        in ForwardRef(IonRouterOutlet) (at App.tsx:36)
        in ion-split-pane (created by IonSplitPane)
        in IonSplitPane (created by ForwardRef(IonSplitPane))
        in ForwardRef(IonSplitPane) (at App.tsx:34)
        in NavManager (created by RouteManager)
        in RouteManager (created by Context.Consumer)
        in RouteManager (created by IonReactRouter)
        in Router (created by BrowserRouter)
        in BrowserRouter (created by IonReactRouter)
        in IonReactRouter (at App.tsx:33)
        in ion-app (created by IonApp)
        in IonApp (created by ForwardRef(IonApp))
        in ForwardRef(IonApp) (at App.tsx:32)
        in App (at App.test.tsx:6)

이 문제는 이 문제와 관련하여 내가 찾을 수 있는 가장 가까운 문제였습니다.

https://github.com/mobxjs/mobx-react/issues/846 에서 mobx에서 이 문제를 일으키는 특정 패턴을 찾았습니다.

@sebmarkbage 더 이상 이 문제를 재현할 수 없습니다. 일부 라이브러리와 문제를 업데이트했습니다.

@jgoux 우리도 같은 문제에 직면해 있는 것 같습니다 @Clovis ^^ Spotted

react 16.13.0 대한 업데이트 반응 이후에 이 오류가 발생하기 시작했습니다. 특정 작업이 완료된 후 내 구성 요소 중 하나가 다른 구성 요소를 업데이트하기 때문에 문제는 매우 명확합니다. 그러나 이것이 왜 경고를 던지는지 확실하지 않습니다. 이 문제를 해결하는 방법에 대한 제안이 있습니까?

@gaearon 스택에서 디버깅하는 방법에 대한 세부 정보에 감사드립니다. 해당 예제를 제공하지 않았다면 개인적으로 이 오류가 어디에서 왔는지 알 수 없었을 것입니다. 🙏

내 문제가 관련되어 있는지 확실하지 않지만 내 양식 구성 요소의 상태를 업데이트하려고 시도하고 있지만 onChange 핸들러를 추가하려고 할 때마다 이 오류가 계속 발생합니다. 나는 react-jsonschema-form을 사용하고 Form 구성 요소를 가져왔고 상태를 업데이트하기 위해 onChange 속성을 사용하고 있습니다.

나에게 이것은 문제를 일으키는 패턴입니다.

이 문제를 해결하는 방법이 있을 수 있습니다. 그러나 콘솔 로그는 나를 385행으로 바로 가리켰습니다.

나는 처음 반응하지만 다음과 같은 코드가 있습니다.

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={setMobileNavOpen(false)} //problem here
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

결과: Cannot update a component from inside the function body of a different component.

다음과 같이 MobileNav의 setMobileNavOpen에 화살표 기능을 추가하기만 하면 됩니다.

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(false)} //fixes problem
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

그리고 그것은 문제를 해결합니다. 이것이 누군가를 돕기를 바랍니다!

나는 처음 반응하지만 다음과 같은 코드가 있습니다.

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={setMobileNavOpen(false)} //problem here
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

결과: Cannot update a component from inside the function body of a different component.

다음과 같이 MobileNav의 setMobileNavOpen에 화살표 기능을 추가하기만 하면 됩니다.

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(false)} //fixes problem
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

그리고 그것은 문제를 해결합니다. 이것이 누군가를 돕기를 바랍니다!

당신의 예는 실제로 사람들이 react에서 저지르는 초기 실수 중 하나입니다. 여기에서 논의되는 것과 정확히 같은 문제인지 확실하지 않습니다. 귀하의 라인은 다음과 같습니다. onClick={setMobileNavOpen(false) 는 클릭이 아니라 버튼을 누르는 동안 함수를 호출합니다. 그렇기 때문에 화살표 함수로 래핑하면 문제가 해결됩니다.

<Redirect> 사용자를 다른 위치로 보내기 전에 Redux 작업을 전달해야 하는 React Router에서 이 문제가 발생했습니다. 문제는 발송이 완료되기 전에 리디렉션이 발생한 것 같습니다. 나는 내 행동을 약속함으로써 문제를 해결했습니다.

전에:

<Route
  render={routeProps => {
    setRedirectionTarget(somePath(routeProps));
    return <Redirect to={someOtherPath} />;
  }}
/>;

function mapDispatchToProps(dispatch: ThunkDispatch) {
  return {
    setRedirectionTarget: (target: string | null) => dispatch(setRedirectionTarget(target))
  };
}

export const setRedirectionTarget = (location: string | null): SetRedirectionTarget => {
  return {
    type: SET_REDIRECTION_TARGET,
    location
  };
};

후에:

function mapDispatchToProps(dispatch: ThunkDispatch) {
  return {
    setRedirectionTarget: async (target: string | null) => dispatch(await setRedirectionTarget(target))
  };
}

export const setRedirectionTarget = (location: string | null): Promise<SetRedirectionTarget> => {
  return Promise.resolve({
    type: SET_REDIRECTION_TARGET,
    location
  });
};

오류 메시지에 현재 렌더링 중인 구성 요소와 setState가 호출되는 구성 요소 모두에 대한 이름이 포함되도록 만들 것이라고 생각합니다. 누구든지 이것을 위해 PR을 보내고 싶습니까?

오류 메시지에 현재 렌더링 중인 구성 요소와 setState가 호출되는 구성 요소 모두에 대한 이름이 포함되도록 만들 것이라고 생각합니다. 누구든지 이것을 위해 PR을 보내고 싶습니까?

이 부분을 살펴보게 되어 기쁩니다. 내가 알아야 할 포인터가 있습니까?

@samcooke98 이 PR을 열었습니다 https://github.com/facebook/react/pull/18316

다른 사람들이 지적했듯이 Apollo와 같은 후크에 구독이 있고 데이터 수신 시 저장소를 업데이트하려고 시도하는 경우 이 문제가 발생할 수 있습니다. 간단한 수정은 useEffect 예

export const useOrderbookSubscription = marketId => {
  const { data, error, loading } = useSubscription(ORDERBOOK_SUBSCRIPTION, {
    variables: {
      marketId,
    },
  })

  const formattedData = useMemo(() => {
    // Don't dispatch in here.
  }, [data])

  // Don't dispatch here either

  // Dispatch in a useEffect
  useEffect(() => {
    orderbookStore.dispatch(setOrderbookData(formattedData))
  }, [formattedData])

  return { data: formattedData, error, loading }
}

Hyper 에서 이 문제에 직면했지만 후크를 사용하지 않고 있으며 호출 스택의 렌더링 호출에서 아무 것도 찾을 수 없습니다. 그러나 스택에 UNSAFE_componentWillReceiveProps 호출이 있었습니다. componentDidUpdate 업데이트하면 문제가 해결되었습니다. https://github.com/zeit/hyper/pull/4382
누군가에게 도움이 될 수 있으면 여기에 게시하십시오.

여기에서도 마찬가지로 UNSAFE_componentWillMount 호출이 있었고 이를 변경/제거하면 문제가 해결되었습니다.

그러나 우리는 후크를 사용하지 않으며 호출 스택의 렌더링 호출에서 아무 것도 찾을 수 없습니다.

이상하게 들립니다. 나는 당신이 어떻게 이 경고를 받는지 잘 모르겠습니다. setState가 함수 구성 요소에 속하는 경우에만 발생합니다. 당신의 스택은 어떻습니까?

그러나 우리는 후크를 사용하지 않으며 호출 스택의 렌더링 호출에서 아무 것도 찾을 수 없습니다.

이상하게 들립니다. 나는 당신이 어떻게 이 경고를 받는지 잘 모르겠습니다. setState가 함수 구성 요소에 속하는 경우에만 발생합니다. 당신의 스택은 어떻습니까?

Redux로 구성 요소를 분류하고 구성 요소에 플러그인을 적용하는 기능. 아마도 그것이 기능 구성 요소로 간주되는 이유 일 것입니다. 그런데 왜 수명 주기 후크를 업데이트하면 문제가 해결됩니까?

잘 모르겠어. 샌드박스에서 격리된 예제를 만들 수 있습니까? 당신이 예상치 못한 다른 일을 하고 있을지도 모른다는 예감이 듭니다.

격리된 예에서 복제할 수 있는지 확실하지 않습니다. 원인을 찾는 데 어려움을 겪었고 스택 추적에 있고 업데이트 대기 중이었던 것처럼 수명 주기 후크를 방금 업데이트했습니다. 그것은 어떻게 든 문제를 해결했습니다.
여기 에서 문제가 발생한 시점의 리포지토리를 볼 수 있습니다.

그 당시 UNSAFE_componentWillReceiveProps 와 componentDidUpdate 가 모두 구성 요소에 있었기 때문일 수 있습니까(안전하지 않은 것이 실수로 거기에 남아 있음)?

또한 이 경고가 표시되며 스택 추적은 setScriptLoaded 후크를 가리킵니다(내 사용자 지정 후크는 아래 참조). 따라서 useEffect 사용하더라도 setState 핸들러가 다른 비동기 콜백 내에 중첩되면 React는 여전히 경고를 던질 것입니다(제 경우에는 setTimeout 및 load 이벤트 핸들러)? Hooks를 처음 사용하는 것이므로 조언을 주시면 감사하겠습니다. 감사합니다!

/**
 * Detect when 3rd party script is ready to use
 * 
 * <strong i="11">@param</strong> {function} verifyScriptLoaded Callback to verify if script loaded correctly
 * <strong i="12">@param</strong> {string} scriptTagId 
 */

export const useScriptLoadStatus = (verifyScriptLoaded, scriptTagId) => {
    let initLoadStatus = true; // HTML already includes script tag when rendered server-side
    if (__BROWSER__) {
        initLoadStatus = typeof verifyScriptLoaded === 'function' ? verifyScriptLoaded() : false;
    }
    const [isScriptLoaded, setScriptLoaded] = useState(initLoadStatus); 

    useEffect(() => {
        if (!isScriptLoaded) {
            // need to wrap in setTimeout because Helmet appends the script tags async-ly after component mounts (https://github.com/nfl/react-helmet/issues/146)
            setTimeout(() => {
                let newScriptTag = document.querySelector(`#${scriptTagId}`);
                if (newScriptTag && typeof verifyScriptLoaded === 'function') {
                    newScriptTag.addEventListener('load', () => { 
                        return verifyScriptLoaded() ? setScriptLoaded(true) : null;
                    });
                    // double check if script is already loaded before the event listener is added
                    return verifyScriptLoaded() ? setScriptLoaded(true) : null;
                }
            }, 100);
        }
    });

    return isScriptLoaded;
};

@LabhanshAgrawal

그 당시 UNSAFE_componentWillReceiveProps와 componentDidUpdate가 모두 구성 요소에 있었기 때문일 수 있습니까(안전하지 않은 항목이 실수로 거기에 남아 있음)?

라이프 사이클 방법이 여기에 전혀 관련이 없다고 생각합니다. 이것이 내가 당신의 예에서 뭔가 이상하다고 말하는 이유입니다.

@suhanw CodeSandbox 에서 완전한 예제를 제공하십시오. 이 경고를 유발해야 하는 코드에는 문제가 없습니다.

@LabhanshAgrawal 전체 스택을 게시할 수 있습니까? 나는 UNSAFE_componentWillReceiveProps (렌더링과 동일)가 다른 구성 요소에서 setState 를 호출할 수 있다고 생각합니다.

backend.js:6 Warning: Cannot update a component from inside the function body of a different component.
    in Term                           (created by _exposeDecorated(Term))
    in _exposeDecorated(Term)         (created by DecoratedComponent)
    in DecoratedComponent             (created by TermGroup_)
    in TermGroup_                     (created by ConnectFunction)
    in ConnectFunction                (created by Connect(TermGroup_))
    in Connect(TermGroup_)            (created by _exposeDecorated(TermGroup))
    in _exposeDecorated(TermGroup)    (created by DecoratedComponent)
    in DecoratedComponent             (created by Terms)
    in div                            (created by Terms)
    in div                            (created by Terms)
    in Terms                          (created by _exposeDecorated(Terms))
    in _exposeDecorated(Terms)        (created by DecoratedComponent)
    in DecoratedComponent             (created by ConnectFunction)
    in ConnectFunction                (created by Connect(DecoratedComponent))
    in Connect(DecoratedComponent)    (created by Hyper)
    in div                            (created by Hyper)
    in div                            (created by Hyper)
    in Hyper                          (created by _exposeDecorated(Hyper))
    in _exposeDecorated(Hyper)        (created by DecoratedComponent)
    in DecoratedComponent             (created by ConnectFunction)
    in ConnectFunction                (created by Connect(DecoratedComponent))
    in Connect(DecoratedComponent)
    in Provider
r                                     @ backend.js:6
printWarning                          @ react-dom.development.js:88
error                                 @ react-dom.development.js:60
warnAboutRenderPhaseUpdatesInDEV      @ react-dom.development.js:23260
scheduleUpdateOnFiber                 @ react-dom.development.js:21196
dispatchAction                        @ react-dom.development.js:15682
checkForUpdates                       @ connectAdvanced.js:88
handleChangeWrapper                   @ Subscription.js:97
(anonymous)                           @ Subscription.js:23
batchedUpdates$1                      @ react-dom.development.js:21887
notify                                @ Subscription.js:19
notifyNestedSubs                      @ Subscription.js:92
checkForUpdates                       @ connectAdvanced.js:77
handleChangeWrapper                   @ Subscription.js:97
(anonymous)                           @ Subscription.js:23
batchedUpdates$1                      @ react-dom.development.js:21887
notify                                @ Subscription.js:19
notifyNestedSubs                      @ Subscription.js:92
handleChangeWrapper                   @ Subscription.js:97
dispatch                              @ redux.js:222
e                                     @ VM64:1
(anonymous)                           @ effects.ts:11
(anonymous)                           @ write-middleware.ts:14
(anonymous)                           @ index.js:11
(anonymous)                           @ plugins.ts:538
(anonymous)                           @ plugins.ts:540
(anonymous)                           @ index.js:11
dispatch                              @ redux.js:638
(anonymous)                           @ sessions.ts:124
(anonymous)                           @ index.js:8
dispatch                              @ VM64:1
onResize                              @ terms.ts:62
(anonymous)                           @ term.js:179
e.fire                                @ xterm.js:1
t.resize                              @ xterm.js:1
e.resize                              @ xterm.js:1
e.fit                                 @ xterm-addon-fit.js:1
fitResize                             @ term.js:291
UNSAFE_componentWillReceiveProps      @ term.js:408
callComponentWillReceiveProps         @ react-dom.development.js:12998
updateClassInstance                   @ react-dom.development.js:13200
updateClassComponent                  @ react-dom.development.js:17131
beginWork                             @ react-dom.development.js:18653
beginWork$1                           @ react-dom.development.js:23210
performUnitOfWork                     @ react-dom.development.js:22185
workLoopSync                          @ react-dom.development.js:22161
performSyncWorkOnRoot                 @ react-dom.development.js:21787
(anonymous)                           @ react-dom.development.js:11111
unstable_runWithPriority              @ scheduler.development.js:653
runWithPriority$1                     @ react-dom.development.js:11061
flushSyncCallbackQueueImpl            @ react-dom.development.js:11106
flushSyncCallbackQueue                @ react-dom.development.js:11094
batchedUpdates$1                      @ react-dom.development.js:21893
notify                                @ Subscription.js:19
notifyNestedSubs                      @ Subscription.js:92
handleChangeWrapper                   @ Subscription.js:97
dispatch                              @ redux.js:222
e                                     @ VM64:1
(anonymous)                           @ effects.ts:11
(anonymous)                           @ write-middleware.ts:14
(anonymous)                           @ index.js:11
(anonymous)                           @ plugins.ts:538
(anonymous)                           @ plugins.ts:540
(anonymous)                           @ index.js:11
dispatch                              @ redux.js:638
effect                                @ ui.ts:60
(anonymous)                           @ effects.ts:13
(anonymous)                           @ write-middleware.ts:14
(anonymous)                           @ index.js:11
(anonymous)                           @ plugins.ts:538
(anonymous)                           @ plugins.ts:540
(anonymous)                           @ index.js:11
dispatch                              @ redux.js:638
(anonymous)                           @ ui.ts:54
(anonymous)                           @ index.js:8
dispatch                              @ VM64:1
(anonymous)                           @ index.tsx:162
emit                                  @ events.js:210
(anonymous)                           @ rpc.ts:31
emit                                  @ events.js:210
onMessage                             @ init.ts:50

@gaearon 빠른 답변 감사합니다. CodeSandbox에서 예제를 만드는 방법을 알아낼 것입니다(어려움). 하지만 그 동안은 이것이 제 전체 스택 추적입니다.

내 사용자 정의 후크를 가리키는 줄은 다음과 같습니다. https://gist.github.com/suhanw/bcc2688bba131df8301dae073977654f#file -stack-trace-L144

내 사용자 지정 후크 전후에 스택 추적에 더 조사해야 할 것이 있는지 살펴보고 알려주면 정말 좋을 것입니다. 감사 해요!

@LabhanshAgrawal 스택에서 UNSAFE_componentWillReceiveProps 는 Redux 작업을 전달하는 fitResize 를 호출하고 이는 차례로 많은 구성 요소를 업데이트합니다. 따라서 문제. 예, componentDidUpdate 변경하면 작동합니다.

@suhanw 스택에서 ModuleImpressionTracker 라는 것이 생성자 동안 Redux 작업을 전달하는 것으로 나타납니다. 생성자는 부작용이 없어야 합니다. 나는 그것이 당신의 Hook이 아니라 문제의 원인이라고 생각합니다.

알겠습니다. UNSAFE_componentWillReceiveProps 는 렌더링으로 계산되지만 componentDidUpdate 는 계산되지 않습니다.
setState를 수행하는 기능 구성 요소 및 후크의 문제인 점을 위의 논의에서 명확하게 파악할 수 없다는 점을 조금 명확히 해주실 수 있습니까?
질문이 약간 어리석거나 제 테이크 아웃이 잘못된 경우 사과드립니다. 저는 이것에 약간 익숙합니다.

@LabhanshAgrawal

setState를 수행하는 기능 구성 요소 및 후크의 문제인 점을 위의 논의에서 명확하게 파악할 수 없다는 점을 조금 명확히 해주실 수 있습니까?

솔직히 나는 중간에 있는 모든 Redux 것들 때문에 나 자신을 확신하지 못한다. React Redux가 구현되는 방식 때문에 꽤 혼란스럽습니다. 누군가가 React 단독으로 관련되지만 클래스 구성 요소를 사용하는 명확한 재현을 얻을 수 있다면 좋을 것입니다.

여전히 많은 스택 추적이 붙여넣어지고 유형에 관계없이 실제 문제에 대한 실제 재현이 많지 않은 것 같습니다.

urql 것은 @gaearon을 의도한

• 데이터를 가져와서 렌더링하는 <Todos /> 마운트가 있습니다.
• 이전에 urqlClient 연결된 스트림을 설정했습니다.
• 두 번째 <Todos /> 렌더링하면 동일한 쿼리 + 변수 조합이 생성되므로 첫 번째 단계의 <Todos /> 에 대한 결과가 새로 고쳐집니다.
• use-subscription 는 둘 다에 대해 트리거됩니다.

재현 - 첫 번째 쿼리가 렌더링될 때 상단에서 "열기"를 누릅니다.

업데이트를 대기열에 넣을 수는 있지만 top-down 컨텍스트를 사용하여 렌더링하지 않는 한 이 문제를 우회할 수 없다고 가정합니까? 이론적으로 이것은 이 경우에 의도된 동작입니다. Relay가 이 문제를 해결하는 방법이 궁금합니다.

편집: use-subscription 의 getCurrentValue 동안 모든 구독자가 업데이트하도록 트리거하지 않음으로써 urql의 경우에 대한 솔루션을 찾았을 수 있습니다.

https://github.com/FormidableLabs/urql/commit/3a597dd92587ef852c18139e9781e853f763e930

자, 더 자세히 살펴보면 원래 의도했던 것보다 더 많은 경우(예: 클래스의 경우)에서 경고하고 있다고 생각합니다. 우리는 그 중 일부를 침묵시킬 것입니다.

@JoviDeCroock 이 예제는 urql 가 무엇을 하는지 모르기 때문에 별로 도움이 되지 않습니다. :-) 패턴에 대한 피드백을 원하신다면 해당 패턴을 개별적으로 보여주는 샌드박스를 준비할 수 있습니까?

@JoviDeCroock 예, getCurrentValue 는 확실히 부작용이 없습니다 . 우리는 그 이름이 그것에 대해 꽤 명시적이라고 생각했습니다.

사용자 지정 후크의 루트 범위 내에서 redux 작업을 디스패치할 때 이 경고가 표시되는 문제가 있었습니다.

function useCustomHook() {
   const dispatch = useDispatch()
   const value = useSomeOtherHook()
   dispatch(action(value))
}

useEffect 디스패치를 ​​래핑하여 이 문제를 해결했습니다.

@Glinkis 상관없이 나쁜 패턴처럼 들립니다. 구성 요소가 렌더링될 때마다 전체 트리에 알리고 싶은 이유는 무엇입니까?

@gaearon 네, 우리가 해결하려고 했던 문제는 여기에 더 잘 설명되어 있고 꽤 흔한 것 같습니다.

@Glinkis 상관없이 나쁜 패턴처럼 들립니다. 구성 요소가 렌더링될 때마다 전체 트리에 알리고 싶은 이유는 무엇입니까?

내 redux 상태를 내 경로의 ID와 동기화된 상태로 유지해야 하므로 경로가 변경되면 이 업데이트를 전달합니다.

이것이 차선책일 수 있다는 것을 알고 있지만 선택기 내부의 라우팅 데이터에 액세스할 수 있는 다른 방법을 찾지 못했습니다.

@Glinkis 경로 데이터는 어디에서

@JoviDeCroock 이 패턴에 대한 최신 권장 사항은 사용자 지정 예약 가비지 수집 패스라고 생각합니다.

@Glinkis 경로 데이터는 어디에서

이것이 내가 이 토론에 속하는지 확실하지 않지만 이것은 내 후크입니다.

export function useOpenFolder() {
  const dispatch = useDispatch()
  const match = useRouteMatch('/:workspace/(super|settings)?/:type?/:id?/(item)?/:item?')
  const { id, item } = match?.params || {}

  useEffect(() => {
    dispatch(
      openFolder({
        id: id || '',
        item: item || '',
      })
    )
  }, [dispatch, item, id])
}

나중에 다음과 같은 선택기에 이 상태를 사용합니다.

export const getActiveItem = createSelector(
  [getActiveFolderItem, getItems],
  (activeItem, items) => items.all[activeItem]
)

@Glinkis 예, 여기에서 마무리하겠습니다. 하지만 제 제안은 상위 구성 요소에서 useRouteMatch 를 읽고 ID를 소품으로 전달한 다음 평소처럼 선택기에서 소품을 읽는 것입니다. (사실 이것이 요즘 Redux에서 어떻게 수행되는지 모르지만 어떤 방법이 있을 것입니다.)

알겠습니다. UNSAFE_componentWillReceiveProps 는 렌더링으로 계산되지만 componentDidUpdate 는 계산되지 않습니다.

@LabhanshAgrawal 맞습니다. 여기에 몇 가지 배경 설명 :

개념적으로 React는 두 단계로 작동합니다.

• 렌더링 단계는 예를 들어 DOM에 어떤 변경이 필요한지 결정합니다. 이 단계에서 React는 render 호출한 다음 결과를 이전 렌더링과 비교합니다.
• 커밋 단계는 React가 변경 사항을 적용하는 단계입니다. (React DOM의 경우 React가 DOM 노드를 삽입, 업데이트 및 제거할 때입니다.) React는 이 단계에서 componentDidMount 및 componentDidUpdate 와 같은 수명 주기도 호출합니다.

커밋 단계는 일반적으로 매우 빠르지만 렌더링이 느릴 수 있습니다. 이러한 이유로 예정된 동시 모드(아직 기본적으로 활성화되어 있지 않음)는 렌더링 작업을 조각으로 나누고 브라우저 차단을 피하기 위해 작업을 일시 중지했다가 다시 시작합니다. 이것은 React가 커밋하기 전에 렌더링 단계 수명 주기를 두 번 이상 호출하거나 커밋하지 않고 호출할 수 있음을 의미합니다(오류 또는 더 높은 우선 순위 중단으로 인해).

렌더링 단계 수명 주기에는 다음과 같은 클래스 구성 요소 메서드가 포함됩니다.

• constructor
• componentWillMount (또는 UNSAFE_componentWillMount )
• componentWillReceiveProps (또는 UNSAFE_componentWillReceiveProps )
• componentWillUpdate (또는 UNSAFE_componentWillUpdate )
• getDerivedStateFromProps
• shouldComponentUpdate
• render
• setState 업데이터 함수(첫 번째 인수)

위의 메서드는 두 번 이상 호출될 수 있으므로 부작용이 포함되지 않는 것이 중요합니다. 이 규칙을 무시하면 메모리 누수 및 잘못된 응용 프로그램 상태를 비롯한 다양한 문제가 발생할 수 있습니다. 불행히도 이러한 문제는 종종 비결정적 일 수 있으므로 감지하기 어려울 수 있습니다.

자, 더 자세히 살펴보면 원래 의도했던 것보다 더 많은 경우(예: 클래스의 경우)에서 경고하고 있다고 생각합니다. 우리는 그 중 일부를 침묵시킬 것입니다.

의도한 것 이상이라 할지라도 클래스를 사용하여 프로젝트를 개선하는 데 도움이 되기 때문에 가지고 있는 것이 좋다고 생각합니다.

이 자체 설명 오류 메시지 "다른 구성 요소의 함수 본문 내부에서 구성 요소를 업데이트할 수 없습니다"

즉, 컴포넌트를 호출하는 대신 함수로 실행합니다.

다음과 같은 예:

const App = () => {  
  const fetchRecords = () => { 
    return <div>Loading..</div>;
  };  
  return fetchRecords() // and not like <FetchRecords /> unless it is functional component.
};
export default App;

@rpateld 나는 당신이 보여주는 예가 이 경고와 관련이 있다고 생각하지 않습니다.

https://github.com/facebook/react/pull/18330 은 우리가 발사를 시작할 의도가 없었던 경우를 해결할 것입니다.

나는 또한 react@experimental + react-redux + redux 이 문제에 직면하고 있습니다.

코드는 다음과 같습니다.

import React, { Suspense } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import PropTypes from 'prop-types'
import { userActions, cabinetActions, tokensActions } from '../../actions'
import { CircularProgress } from '@material-ui/core'
import { api } from './api'

const Cabinet = ({ resource }) => {
    resource.read()
    return <h1>cabinet</h1>
}

Cabinet.propTypes = {
    resource: PropTypes.shape({
        read: PropTypes.func
    })
}

const CabinetPage = ({
    failedToLoad,
    tokensRefreshFailed,
    logout,
    loadCabinet,
    clearTokens,
    clearCabinet
}) => {
    if (tokensRefreshFailed || failedToLoad) {
        clearTokens()
        clearCabinet()
        logout()
        return <Redirect to='/login' />
    }

    return (
        <Suspense fallback={<CircularProgress />}>
            <Cabinet resource={loadCabinet()} />
        </Suspense>
    )
}

CabinetPage.propTypes = {
    loadCabinet: PropTypes.func,
    failedToLoad: PropTypes.bool,
    tokensRefreshFailed: PropTypes.bool,
    logout: PropTypes.func,
    clearTokens: PropTypes.func,
    clearCabinet: PropTypes.func
}

const mapStateToProps = ({
    alert,
    tokens: { tokensRefreshFailed },
    cabinet: { failedToLoad }
}) => ({
    alert,
    tokensRefreshFailed,
    failedToLoad
})

const mapDispatchToProps = dispatch =>
    bindActionCreators(
        {
            cabinetLoad: cabinetActions.load,
            logout: userActions.logoutWithoutRedirect,
            loadCabinet: api.loadCabinet,
            clearCabinet: cabinetActions.clear,
            clearTokens: tokensActions.clear
        },
        dispatch
    )

export default connect(mapStateToProps, mapDispatchToProps)(CabinetPage)

loadCabinet() 는 동시 문서에서 말했듯이 3단계 렌더링의 비동기 작업을 전달하고 read() prop이 있는 개체를 반환합니다.
그러나 여기에는 부모 업데이트가 표시되지 않습니다.

@h0tw4t3r 구성 요소를 렌더링하는 동안 Redux 작업을 전달하고 있습니다. 이것은 지원되지 않으며 이것이 경고에 대한 것입니다. 이 경우(리디렉션)을 정상적으로 처리하는 방법에 대해 React Router 전문가에게 문의하는 것이 가장 좋습니다. 해당 부분은 도움이 되지 않습니다.

동시 모드와 관련하여 Redux는 현재 일반적으로 호환되지 않습니다. 따라서 CM을 실험하는 경우 피하는 것이 좋습니다.

이 스레드에 대한 작은 업데이트

클래스에 대한 이 경고의 과도한 실행을 수정하는 React 패치를 곧 출시할 예정입니다. 따라서 이러한 문제가 발생하면 며칠 기다렸다가 종료되면 16.13.1을 시도하는 것이 좋습니다.

원인을 계속 찾고 싶다면 https://github.com/facebook/react/issues/18178#issuecomment -595846312에서 방법을 설명하기를

동일한 논리가 클래스 구성 요소에서 사용될 때 기능(후크)이 수행하는 동안 경고를 표시하지 않는 것이 매우 이상하다는 것을 알았습니다.

기능 구성 요소(후크):

import React, { Component } from "react"
import SortableTree from "react-sortable-tree"
import "react-sortable-tree/style.css"

const data = [
  {
    title: "Windows 10",
    subtitle: "running",
    children: [
      {
        title: "Ubuntu 12",
        subtitle: "halted",
        children: [
          {
            title: "Debian",
            subtitle: "gone"
          }
        ]
      },
      {
        title: "Centos 8",
        subtitle: "hardening"
      },
      {
        title: "Suse",
        subtitle: "license"
      }
    ]
  }
]

const nodeInfo = row => console.log(row)

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      searchString: "",
      searchFocusIndex: 0,
      searchFoundCount: null,
      treeData: data
    }
  }

  render() {
    const { searchString, searchFocusIndex, searchFoundCount } = this.state

    const customSearchMethod = ({ node, searchQuery }) =>
      searchQuery &&
      ((node.title &&
        node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1) ||
        (node.subtitle &&
          node.subtitle.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1))

    const selectPrevMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
            : searchFoundCount - 1
      })

    const selectNextMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFocusIndex + 1) % searchFoundCount
            : 0
      })

    return (
      <div>
        <h2>Find the needle!</h2>
        <form
          style={{ display: "inline-block" }}
          onSubmit={event => {
            event.preventDefault()
          }}
        >
          <input
            id="find-box"
            type="text"
            placeholder="Search..."
            style={{ fontSize: "1rem" }}
            value={searchString}
            onChange={event =>
              this.setState({ searchString: event.target.value })
            }
          />
          &nbsp;
          <button
            type="button"
            disabled={!searchFoundCount}
            onClick={selectPrevMatch}
          >
            &lt;
          </button>
          &nbsp;
          <button
            type="submit"
            disabled={!searchFoundCount}
            onClick={selectNextMatch}
          >
            &gt;
          </button>
          &nbsp;
          <span>
            &nbsp;
            {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
            &nbsp;/&nbsp;
            {searchFoundCount || 0}
          </span>
        </form>

        <div style={{ height: 300 }}>
          <SortableTree
            treeData={this.state.treeData}
            onChange={treeData => this.setState({ treeData })}
            searchMethod={customSearchMethod}
            searchQuery={searchString}
            searchFocusOffset={searchFocusIndex}
            searchFinishCallback={matches =>
              this.setState({
                searchFoundCount: matches.length,
                searchFocusIndex:
                  matches.length > 0 ? searchFocusIndex % matches.length : 0
              })
            }
            generateNodeProps={row => {
              return {
                title: row.node.title,
                subtitle: (
                  <div style={{ lineHeight: "2em" }}>{row.node.subtitle}</div>
                ),
                buttons: [
                  <button
                    type="button"
                    className="btn btn-outline-success"
                    style={{
                      verticalAlign: "middle"
                    }}
                    onClick={() => nodeInfo(row)}
                  >
                    ℹ
                  </button>
                ]
              }
            }}
          />
        </div>
      </div>
    )
  }
}

클래스 구성 요소:

import React from "react";
import SortableTree from "react-sortable-tree";
import "react-sortable-tree/style.css";

const data = [
  {
    title: "Windows 10",
    subtitle: "running",
    children: [
      {
        title: "Ubuntu 12",
        subtitle: "halted",
        children: [
          {
            title: "Debian",
            subtitle: "gone"
          }
        ]
      },
      {
        title: "Centos 8",
        subtitle: "hardening"
      },
      {
        title: "Suse",
        subtitle: "license"
      }
    ]
  }
];

const nodeInfo = row => console.log(row);

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchString: "",
      searchFocusIndex: 0,
      searchFoundCount: null,
      treeData: data
    };
  }

  render() {
    const { searchString, searchFocusIndex, searchFoundCount } = this.state;

    const customSearchMethod = ({ node, searchQuery }) =>
      searchQuery &&
      ((node.title &&
        node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1) ||
        (node.subtitle &&
          node.subtitle.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1));

    const selectPrevMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
            : searchFoundCount - 1
      });

    const selectNextMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFocusIndex + 1) % searchFoundCount
            : 0
      });

    return (
      <div>
        <h2>Find the needle!</h2>
        <form
          style={{ display: "inline-block" }}
          onSubmit={event => {
            event.preventDefault();
          }}
        >
          <input
            id="find-box"
            type="text"
            placeholder="Search..."
            style={{ fontSize: "1rem" }}
            value={searchString}
            onChange={event =>
              this.setState({ searchString: event.target.value })
            }
          />
          &nbsp;
          <button
            type="button"
            disabled={!searchFoundCount}
            onClick={selectPrevMatch}
          >
            &lt;
          </button>
          &nbsp;
          <button
            type="submit"
            disabled={!searchFoundCount}
            onClick={selectNextMatch}
          >
            &gt;
          </button>
          &nbsp;
          <span>
            &nbsp;
            {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
            &nbsp;/&nbsp;
            {searchFoundCount || 0}
          </span>
        </form>

        <div style={{ height: 300 }}>
          <SortableTree
            treeData={this.state.treeData}
            onChange={treeData => this.setState({ treeData })}
            searchMethod={customSearchMethod}
            searchQuery={searchString}
            searchFocusOffset={searchFocusIndex}
            searchFinishCallback={matches =>
              this.setState({
                searchFoundCount: matches.length,
                searchFocusIndex:
                  matches.length > 0 ? searchFocusIndex % matches.length : 0
              })
            }
            generateNodeProps={row => {
              return {
                title: row.node.title,
                subtitle: (
                  <div style={{ lineHeight: "2em" }}>{row.node.subtitle}</div>
                ),
                buttons: [
                  <button
                    type="button"
                    className="btn btn-outline-success"
                    style={{
                      verticalAlign: "middle"
                    }}
                    onClick={() => nodeInfo(row)}
                  >
                    ℹ
                  </button>
                ]
              };
            }}
          />
        </div>
      </div>
    );
  }
}

@radulle 이것은 그 자체로 매우 유용한 예가 아닙니다. CodeSandbox에 넣으려고 시도했지만 작동하지 않습니다: https://codesandbox.io/s/clever-taussig-9xixs. 우리가 시도할 수 있는 예를 준비할 수 있습니까?

@gaearon 코드샌드박스 를 만들고 싶었지만 최신 버전의 라이브러리에 문제가 있습니다. 이전 버전에서는 오류가 발생하지 않습니다. 현재로서는 이를 재현하는 유일한 방법은 Create React App에서 로컬로 회전하는 것입니다.

@radulle CodeSandbox에서 작동하는 버전은 무엇입니까?

@gaearon 2.6.2가 작동하고 다음 설정으로 오류/경고가 발생합니다.

따라서 동일한 설정의 경우:
기능 구성 요소: 오류/경고
클래스 구성 요소: 오류/경고 없음
어쩌면 내가 놓친 것이 있고 그것들이 동등하지 않을 수도 있습니다.

네, 이것은 제가 https://github.com/facebook/react/issues/18178#issuecomment -600369392에서 언급한 사례 중 하나입니다. 이 경우 경고를 음소거합니다. 경고 자체는 합법적이며 당신이 올바르게 말했듯이 개념적으로 수업에서도 문제입니다. 우리가 지금은 (이 예에서는, 그것이) 클래스에서 오는 때를 위해 두 경우 모두 그것을 음소거 것 때문에 그러나, 차이는 이해가되지 않습니다.

효과가 아닌 렌더링 기능에서 상태 업데이트를 실행하는 합법적인 사용 사례가 있다고 생각합니다. 즉, 실행 순서를 유지하기 위한 것입니다.

실용적인 예를 들어 설명하자면: 우리 앱에는 이동 경로를 관리하는 독특한 시스템이 있습니다.

• 우리는 모든 이동 경로를 보유하는 글로벌 컨텍스트를 가지고 있습니다.

• 다음과 같이 이 컨텍스트에 이동 경로를 추가할 수 있는 후크가 있습니다.

  const addBreadcrumb = useAddBreadcrumb();
  addBreadcrumb(<Breadcrumb>{item.name}</Breadcrumb>, [item.name]);
  

• 컨텍스트에서 정보를 읽고 모든 이동 경로를 렌더링하는 구성 요소가 있습니다. 따라서 이동 경로를 렌더링할 때마다 매개변수 없이 호출하기만 하면 됩니다.

이것은 이동 경로 구조를 유지할 필요가 없기 때문에 매우 실용적입니다. 이 구조는 코드 자체에서 선언됩니다. 경로를 애플리케이션의 다른 부분으로 이동하려는 경우 이동 경로 시스템은 계속 작동합니다.

따라서 react-router 와 결합하여 다음과 같이 할 수 있습니다.

// Main/index.tsx
import { useAddBreadcrumb } from 'components/Breadcrumbs';
import React from 'react';
import Home from './Home';
import Movies from './Movies';

const Main = () => {
    const addBreadcrumb = useAddBreadcrumb();
    addBreadcrumb(<Breadcrumb to="/">Home</Breadcrumb>, []);

    return <Switch>
        <Route path="/movies">
            <Movies />
        </Route>
        <Route path="/" />
            <Home />
        </Route>
    </Switch>
}

// Movies/index.tsx
import { useAddBreadcrumb } from 'components/Breadcrumbs';
import React from 'react';
import Detail from './Detail';
import Master from './Master';

const Movies = ({ url }) => {
    const addBreadcrumb = useAddBreadcrumb();
    addBreadcrumb(<Breadcrumb to={url}>Movies</Breadcrumb>, [url]);

    return <Switch>
        <Route path="/:id">
            <Detail />
        </Route>
        <Route path="/" />
            <Master />
        </Route>
    </Switch>
}

// Movies/Detail/index.tsx
import Breadcrumbs, { useAddBreadcrumb } from 'components/Breadcrumbs';
import React from 'react';
import { useRouteMatch } from 'react-router-dom';

const MovieDetail = ({ url }) => {
    const addBreadcrumb = useAddBreadcrumb();
    const { params: { id } } = useRouteMatch<{ id: string; }>();
    const movie = useMovie(id);

    addBreadcrumb(
        <Breadcrumb to={url}>{movie?.name}</Breadcrumb>,
        [movie?.name, url]
    );

    return <div>
        <Breadcrumbs />
    </div>
}

이제 /movies/gone-with-the-wind 로 이동하면 이동 경로가 다음과 같이 표시됩니다.

Home > Movies > Gone with the wind

자, 여기 내 요점이 있습니다. 이것이 작동하려면 실행 순서가 보장되어야 합니다. 이 경우 실행 순서는 분명합니다. 먼저 Main 렌더링된 다음 Movies 를 포함하는 자식이 렌더링되고 마지막으로 MovieDetail 렌더링됩니다. 이 경우 addBreadcrumb 호출이 올바른 순서로 실행됩니다.

이제 변경 로그에 다음과 같이 나와 있습니다.

렌더링 결과로 다른 구성 요소의 상태를 의도적으로 변경하려는 드문 경우에 setState 호출을 useEffect로 래핑할 수 있습니다.

이것은 실제로 다른 구성 요소의 상태를 의도적으로 변경하려는 드문 경우 중 하나입니다. 그러나 변경 로그가 제안하고 addBreadcrumb (결국 setState ) 를 useEffect 로 감싸면 실행 순서가 더 이상 보장되지 않습니다. 세 가지 setStates 모두 렌더링이 완료된 후 실행되어 경쟁 조건이 생성되고 시스템이 중단됩니다.

이 독특한 시스템이 안티 패턴으로 간주되는지 여부는 모르겠지만 나에게는 의미가 있으며 더 간단한 대안을 찾지 못했습니다.

그래서 결론적으로 나는 이 새로운 경고를 환영하지만, 우리에게 최적의 해결책은 그것을 억제할 방법을 갖는 것이라고 생각합니다. setState 대한 두 번째 선택적 매개변수가 트릭을 수행할 수 있습니다.

@MeLlamoPablo

형제 또는 부모/자식 렌더링 순서의 렌더 호출에 의존하는 것은 매우 취약하게 들립니다. React는 실제로 이것을 보장하지 않습니다. 어린이는 부모 없이 다시 렌더링할 수 있으며 그 반대도 마찬가지입니다. 자식이 지연으로 렌더링되면(예: 코드 분할) 이 코드도 중단됩니다. 또는 일부 자식이 동적으로 삽입되거나 삭제되는 경우. 말할 것도 없이, 이것은 계단식 렌더가 너무 많기 때문에 성능 면에서 상당히 좋지 않습니다.

나는 당신이 해결하려는 문제에 공감합니다. 실제로 오늘날 React에는 관용적 솔루션이 없습니다. 이에 대한 몇 가지 아이디어가 있지만 적절한 솔루션은 상당히 달라야 합니다. 그동안 이 해결 방법을 사용하지 않는 것이 좋습니다.

@gaearon , 통찰력 주셔서 감사합니다. 한 가지 질문이 있습니다. 첫 번째 렌더링의 순서가 보장됩니까? 그것이 우리가 제대로 작동하는 데 필요한 전부이기 때문입니다(한 번 이동 경로를 알고 나면 후속 렌더링의 순서는 신경 쓰지 않습니다).

첫 번째 렌더링의 순서가 보장된다는 것이 논리적으로 보입니다. 그렇지 않으면 React가 부모 구성 요소에 자식이 있다는 것을 어떻게 알 수 있습니까?

계단식 렌더의 성능에 대해서는 전적으로 맞습니다. 시스템을 개선할 수 있는 방법을 찾을 것입니다.

@MeLlamoPablo

한 가지 질문이 있습니다. 첫 번째 렌더링의 순서가 보장됩니까? 그것이 우리가 제대로 작동하는 데 필요한 전부이기 때문입니다(한 번 이동 경로를 알고 나면 후속 렌더링의 순서는 신경 쓰지 않습니다).

강력하지 않습니다. 나는 그것이 대부분 현재 버전의 React에서 작동한다고 생각하지만 미래에는 바뀔 수 있습니다. 오늘날에도 lazy 및 Suspense 와 같은 기능과 결합하여 보장되지 않습니다.

그렇지 않으면 React가 부모 구성 요소에 자식이 있다는 것을 어떻게 알 수 있습니까?

형제자매 순서는 보장되지 않습니다. 부모/자식 순서의 경우 부모 가 먼저 렌더링 하기 전에 또는 첫 번째 자식을 렌더링한 후에도 두 번째 자식보다 먼저 부모를 다시 렌더링해야 할 수도 있습니다. 다시 말하지만, 코드 분할과 같은 기능을 추가하면 더 빨리 보장을 잃게 됩니다.

이것은 깨지기 쉽습니다.

@gaearon님 , 다시 한번 감사드립니다. 이것은 매우 감사합니다.

렌더링 본문 내에서 useState mutators 호출에 대해 경고하는 ESLint 규칙이 있어야 합니까?

(이 아껴서 사용해야하지만) 렌더링하는 동안 자신의 구성 요소와 setState를 호출하면 지원되는 패턴이다. 나쁜 다른 구성 요소의 setState입니다. 정적으로 감지할 수 없습니다.

이론적으로 ts-eslint를 사용하여 수행할 수 있습니다. 올바른 업스트림 React 유형을 사용하고 있다고 가정할 때 그렇습니다. 하지만 아마도 가치가 있는 것보다 더 많은 노력이 필요할 것입니다.

일종의 효과 추적 없이는 불가능하다고 생각합니다. 중간에 기능이 하나 있으면 정보를 잃게 됩니다.

나는 또한 react@experimental + react-redux + redux 이 문제에 직면하고 있습니다.

코드는 다음과 같습니다.

import React, { Suspense } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import PropTypes from 'prop-types'
import { userActions, cabinetActions, tokensActions } from '../../actions'
import { CircularProgress } from '@material-ui/core'
import { api } from './api'

const Cabinet = ({ resource }) => {
  resource.read()
  return <h1>cabinet</h1>
}

Cabinet.propTypes = {
  resource: PropTypes.shape({
      read: PropTypes.func
  })
}

const CabinetPage = ({
  failedToLoad,
  tokensRefreshFailed,
  logout,
  loadCabinet,
  clearTokens,
  clearCabinet
}) => {
  if (tokensRefreshFailed || failedToLoad) {
      clearTokens()
      clearCabinet()
      logout()
      return <Redirect to='/login' />
  }

  return (
      <Suspense fallback={<CircularProgress />}>
          <Cabinet resource={loadCabinet()} />
      </Suspense>
  )
}

CabinetPage.propTypes = {
  loadCabinet: PropTypes.func,
  failedToLoad: PropTypes.bool,
  tokensRefreshFailed: PropTypes.bool,
  logout: PropTypes.func,
  clearTokens: PropTypes.func,
  clearCabinet: PropTypes.func
}

const mapStateToProps = ({
  alert,
  tokens: { tokensRefreshFailed },
  cabinet: { failedToLoad }
}) => ({
  alert,
  tokensRefreshFailed,
  failedToLoad
})

const mapDispatchToProps = dispatch =>
  bindActionCreators(
      {
          cabinetLoad: cabinetActions.load,
          logout: userActions.logoutWithoutRedirect,
          loadCabinet: api.loadCabinet,
          clearCabinet: cabinetActions.clear,
          clearTokens: tokensActions.clear
      },
      dispatch
  )

export default connect(mapStateToProps, mapDispatchToProps)(CabinetPage)

loadCabinet() 는 동시 문서에서 말했듯이 3단계 렌더링의 비동기 작업을 전달하고 read() prop이 있는 개체를 반환합니다.
그러나 여기에는 부모 업데이트가 표시되지 않습니다.

이 문제가 있는 다른 사람의 경우 redux 작업 디스패치를 ​​반환된 구성 요소로 이동하여 문제를 해결했습니다. 현재 모습은 다음과 같습니다.

const CabinetPage = ({
    alert,
    failedToLoad,
    tokensRefreshFailed,
    logout,
    loadCabinet,
    clearTokens,
    clearCabinet,
    clearAlert
}) => (
    <Suspense fallback={<MUIBackdropProgress />}>
        {alert.message && (failedToLoad || tokensRefreshFailed) ? (
            <MUIAlertDialog
                title={alert.message}
                text={errorText}
                onClose={() => {
                    clearAlert()
                    clearCabinet()
                    clearTokens()
                    logout()
                }}
            />
        ) : (
            <Cabinet resource={loadCabinet()} />
        )}
    </Suspense>
)

이 경고가 마음에 드는 이유는 올바른 디자인 패턴을 선택하도록 하기 때문입니다. 이제 모든 것이 완벽하게 작동합니다!

16.13.1에서 경고가 과도하게 발생하는 경우를 수정했습니다. 나머지 사례는 합법적이며 수정해야 합니다.

@gaearon이 방금 업그레이드되고 오류가 사라졌습니다! 당신의 작업에 감사드립니다!

@gaearon 감사합니다. 당신은 방금 내 하루를 구했습니다 :-)

업그레이드해도 문제가 해결되지 않았지만 콘솔에서 문제를 찾는 데 도움이 되는 추가 정보를 제공했습니다. @gaearon 감사

다른 구성 요소가 지난번과 동일한 상태를 반환하도록 하는 작업을 전달하면 어떻게 될까요? 나쁜 것으로 간주됩니까? 그런 경우에는 단락될 것이라고 생각합니다.

나는 완전히이 경고 뒤에 논리를 이해하면서 난 그냥이 있다고 말할 수 ... 거의 팀이 코드에 방법에 대한 이러한 중요한 진리를 가르쳐 준 것처럼 느낌 때문에이 팀이 지역 사회를 말하고있다 반작용 무엇을 배신 같은 느낌 반응:

1) 계층 구조에서 필요한 만큼 높은 상태를 유지하고(높지 않음) 데이터 와 설정자 를 하위 구성 요소로 전달합니다.

2) 기능 구성 요소가 굉장합니다! 클래스 노이즈는 잊어버리고 전체 구성 요소를 하나의 기능으로 수행하십시오!

이제 사람들이 이 두 가지 규칙을 따르고 상태 설정자를 함수 구성 요소로 전달하고 해당 구성 요소에서 호출하면 ... 당신은 깔개를 꺼내고 "하하, 하지만 우리가 말한 것을 실제로 할 수는 없습니다. 할 것".

이 중 어느 것도 여기서 기술적인 요구 사항에 대해 아무 것도 변경하지 않으며 이 변경에 대해 아무 말도 하지 않습니다. 이 변경 사항이 잘못되었거나 나쁘다고 말하는 것이 아닙니다 ... 나는 단지 메시징 문제가 있다고 생각합니다. 방금 언급했습니다) 이 새로운 세계에서 코딩하기 위한 것입니다. 우리에 대한 규칙을 변경하려는 경우 먼저 모범 사례를 설명하여 변경하는 데 도움이 될 것이라고 생각합니다.

그래서 제가 정말로 묻고 싶은 것은 ... 팀의 누군가가 "이전에 우리가 두 가지 규칙을 준 것을 압니다. 새 규칙"을 클릭한 다음 이 새로운 경고를 참조하는 문서/릴리스 노트의 모든 위치에 해당 문서에 대한 링크를 추가합니다(따라서 "WTF가 이것이?"라고 인터넷 검색을 하는 모든 사람은 "새로운 세계").

@machineghost : 메시지가 경고하는 내용을 오해하고 있는 것 같습니다.

부모의 상태를 업데이트하는 콜백을 자식에게 전달하는 데 아무런 문제가 없습니다. 항상 괜찮았습니다.

문제는 _첫 번째 구성 요소가 렌더링되는 동안_ 한 구성 요소가 다른 구성 요소의 업데이트를 대기열에 넣을 때입니다.

즉, 다음과 같이 하지 마십시오.

function SomeChildComponent(props) {
    props.updateSomething();
    return <div />
}

그러나 이것은 괜찮습니다.

function SomeChildComponent(props) {
    // or make a callback click handler and call it in there
    return <button onClick={props.updateSomething}>Click Me</button>
}

그리고 Dan이 여러 번 지적했듯이 렌더링하는 동안 _same_ 구성 요소의 업데이트를 대기열에 넣는 것도 괜찮습니다.

function SomeChildComponent(props) {
  const [number, setNumber] = useState(0);

  if(props.someValue > 10 && number < 5) {
    // queue an update while rendering, equivalent to getDerivedStateFromProps
    setNumber(42);
  }

  return <div>{number}</div>
}

맞습니다. 하지만 구성 요소를 코딩할 때 상위 요소의 타이밍을 생각하지 않습니다. 이것이 React 구성 요소의 아름다움의 일부인 캡슐화입니다.

다시 말하지만, 새로운 경고가 전혀 나쁘다고 말하는 것이 아닙니다. 좋은 React 개발자가 따를 수 있는 두 가지 규칙이 있기 전에 말하는 것입니다. 이제 X 조건에서 이러한 규칙은 창 밖으로 나가지만 X 아래에서만(X = "부모 구성 요소도 업데이트되는 동안"처럼 들림).

그냥 "이게 문제야!"라고 말하는 것보다 그것을 설명하고 문제를 피하는 방법에 더 집중해야한다고 생각합니다.

@machineghost : 당신은 _정말_ 내가 여기서 말하는 것을 이해하지 못하고 있습니다.

부모/자식 타이밍이 문제가 아닙니다.

함수 구성 요소를 렌더링하는 동안 _다른 구성 요소에서 상태 업데이트를 대기열에 넣는 것이 문제입니다.

정의에 따르면 부모/자식(또는 손자)이어야 합니다. 그렇지 않으면 상태 설정자를 전달할 수 있습니까?

이것이 다른 구성 요소 관계에서도 문제가 될 수 없다고 말하는 것이 아니라 React 모범 사례를 따르고 상태 설정자를 전달한 다음 이 경고를 받는 사람들에 대해 구체적으로 이야기하는 것입니다.

그것이 내가 말하는 전부이며, 내가 말하는 전부는 "여기에 '새로운 오류가 있으며 이것이 의미하는 바'가 아니라 코드를 잘 작성하는 방법에 더 중점을 두어 더 잘 설명할 수 있습니다."입니다.

타이밍. 아니다. 문제.

함수 구성 요소는 렌더링하는 동안 자체적으로만 상태 업데이트를 대기열에 넣을 getDerivedStateFromProps 와 동일한 역할을 합니다.

함수 구성 요소의 실제 렌더링 본문 내에서 _any_ 다른 구성 요소에 대한 업데이트를 대기열에 넣는 것은 불법입니다.

이것이 이 경고가 말하는 것입니다.

어떻게 더 명확하게 설명할 수 있을지 모르겠습니다.

타이밍이 문제가 아닙니다. 당신의 것이 아니라 제 것이 아닙니다. 내 문제는 문서 또는 문서 부족입니다.

그러나 당신은 그들이 말하는 것을 듣는 대신 인터넷 낯선 사람과의 문제 스레드에서 전쟁을 시작하기로 결정했습니다.

요점은 변경된 규칙이 없다는 것입니다. 이것은 항상 잘못된 패턴이었습니다. 코드에 버그가 있음을 알 수 있도록 강조 표시됩니다.

그리고 말 그대로 당신이 방금 말한 어떤 것도 내가 쓴 것과 일치하지 않습니다. 사실, 그 같은 규칙을 더 잘 설명, 당신은 변경되지 않은 말 사람이었다 (물론 내가 처음부터 똑같은 일을 말한 ... 모두 내가 모든 시간을 요구 거의 같다 그들은 변경 하지 않았 으며 "새로운 세상을 만들었다"는 경고였습니다).

추신: 당신도 여기서 아이러니를 깨닫지 못하는 것 같습니다. 내가 이해하지 못하는 것이 있으면 문서를 개선할 수 있습니다. 내가 사물을 얼마나 잘 이해하지 못한다고 나에게 소리치는 것은 나의 지위를 강화시킬 뿐입니다. 문서를 마술처럼 향상시키지는 않습니다.

안녕하세요 여러분, 조금 진정합시다. 🙂

@markerikson 참여해 주셔서 감사합니다. 하지만 이 토론이 너무 과열되고 있는 것 같습니다.

@machineghost 우려를 표명

이 경고에는 사전 컨텍스트가 필요하다는 데 동의합니다. 본질적으로, 당신은 수업 시대부터 두 가지를 알아야 했습니다.

• 렌더링하는 동안 setState를 사용하면 안 됩니다. 수업은 항상 이것에 대해 경고했습니다.

• 해당 함수 구성 요소 본문은 본질적으로 클래스 구성 요소 렌더링 메서드와 동일합니다.

함수 구성 요소 본문 중에 다른 구성 요소에 대한 setState가 이전에 경고하지 않은 것은 실제로 우리의 누락입니다. 당신은 위의 두 점에서 나쁜 패턴입니다 추론 할 수 있지만, 하나는 그것을 실현하지 못했습니다 말할 공정이다. 불편을 드려 죄송합니다.

문서에서 이를 언급해야 하는 특정 위치가 있다고 생각되면 문서 저장소에 문제를 제기하세요. Hooks를 기반으로 문서를 다시 작성할 계획이므로 염두에 둘 수 있습니다. 감사 해요!

나는 결코 누군가를 기분 나쁘게 만들 생각이 없으며, 나는 당신의 사과를 받아들이기를 거부합니다 ;) 후크는 천재이며, 여러분은 후크를 발명한 천재입니다. 그리고 모든 결과를 완벽하게 상상하지 못한다고 다른 엔지니어를 탓하는 엔지니어는 ... 바보입니다.

내가 의사소통을 하려고 했던 것은 현재 이 경고를 받았을 때 모든 사람들이 하는 대로 했다는 것입니다. 구글링을 해봤습니다. 그런 다음 "이 새로운 경고가 있습니다"라는 페이지를 찾았습니다.

나는 단지 그 발표에 링크가 있거나 구글링을 통해 누군가가 찾을 수 있는 유사한 장소에 "여기에 있는 우리가 이 오류를 도입한 이유와 멋진 React 개발자가 될 수 있는 방법과 직접 발생하지 않도록 몇 가지 기본 지침을 따르는 방법은 다음과 같습니다."

그러나 다시, hooks는 굉장하고 React 팀은 굉장하며 이 새로운 경고조차도 굉장합니다(보호하려는 오류를 발견하는 데 지옥을 능가할 것이라고 확신합니다). 누군가에게 사과를 빚진 사람이 있다면 내가 책임을 져야 합니다.

물론 힘든 감정은 없습니다. "왜"에 대한 대답은 "렌더링 중에 한 구성 요소가 다른 구성 요소에 대한 업데이트를 트리거하면 더 이상 위에서 아래로 이동하지 않기 때문에 앱의 데이터 흐름을 추적하기가 매우 어려워집니다"보다 더 복잡하지 않습니다. 따라서 그렇게 하면 React의 이점을 버리는 것과 같습니다.

다시 한 번 명확히 하자면, 이것은 그 자체로 새로운 것이 아닙니다. 클래스에는 항상 동일한 경고가 있었습니다. 우리는 Hooks로 그것을 놓쳤고, 그 실수를 수정하고 있습니다. 문제를 해결하는 방법은 사례에 따라 다르기 때문에 정확한 지침을 드릴 수는 없지만 어려움을 겪고 있는 예를 공유해 주시면 기꺼이 도와드리겠습니다. 일반적으로 항상 존재하는 해당 클래스 경고를 수정하는 것과 유사한 방식으로 수정합니다.

조금이나마 도움이 되길 바랍니다!

나는 이 토론에 2센트를 추가하고 기능 구성 요소와 후크가 도입된 이후로 많은 혼란이 있었다는 @machineghost의 의견에 동의합니다. 커뮤니티에서는 리액트팀을 리더십으로 찾고 있는데, 예전에는 단순했던 것들이 점점 복잡해지고 소통과 명확한 사례가 부족한 것 같습니다.

케이스와 포인트는 ComponentDidMount 및 Unmount입니다. 먼저 함수 구성 요소를 사용하라는 지시를 받은 다음 빈 배열과 함께 useEffect를 사용하라는 지시를 받았습니다. 그런 다음 이것이 좋지 않다는 지시를 받았습니다. 이제 이 오류 메시지가 엉망이 되었습니다. 잘 모르겠습니다. 대응하는 모든 노력에 감사하지만 문서화 및 모범 사례에 더 많은 노력을 기울여야 합니다.

나는 너무 오랫동안 함수를 사용하여(훅 이전에도 Recompose 등으로 클래스를 피하려고 시도) 그 클래스 경고조차 기억하지 못합니다.

그리고 귀하의 응답에 감사하지만 저는 주로 "경험 법칙", 지침, 모범 사례 등을 기대하고 있었습니다. " 또는 "제어 패턴의 반전을 사용하여 상태 설정자를 하위 구성 요소로 전달합니다."

아마도 여기에는 없을 수도 있지만 "기능 구성 요소 A가 상태를 변경하면 상태 설정자를 전달하는 하위 구성 요소 B를 렌더링해서는 안 됩니다. 자식 구성 요소가 렌더링되고 상태가 변경되면 문제가 발생합니다."

아니면 일요일이 늦어서 하루 종일 개인 프로젝트에 몰두했고, 내 두뇌는 너무 튀어서 단순한 것을 어려운 것으로 만들고 있습니다. 어느 쪽이든, 지침에 대한 추가 제안이 있으면 다시 게시할 것이지만, 그렇지 않으면 다른 사람이 이에 대해 일요일 밤을 보내는 것을 원하지 않습니다.

그래도 다시 한 번 감사합니다!

나는 우리가 이 쓰레드가 그 유용성을 능가하는 지점에 도달했다고 생각합니다.

케이스와 포인트는 ComponentDidMount 및 Unmount입니다. 먼저 함수 구성 요소를 사용하라는 지시를 받은 다음 빈 배열과 함께 useEffect를 사용하라는 지시를 받았습니다. 그런 다음 이것이 좋지 않다는 지시를 받았습니다. 이제 이 오류 메시지가 엉망이 되었습니다.

저희 문서가 도움이 되지 못해서 유감이지만 어떤 특정 문제가 발생했는지 말하기는 매우 어렵습니다. 이것은 불행히도 매우 모호하며 우리가 말하려고 한 것의 왜곡입니다. 고장난 전화기 게임처럼. 특정 문제가 있는 경우 새 문제를 제출하고 더 자세히 설명하십시오. 좀 더 구체적으로 알려주시면 도와드리겠습니다.

귀하의 응답에 감사하지만 저는 주로 "경험상 규칙", 지침, 모범 사례 등을 기대하고 있었습니다.

경험의 법칙은 항상 "렌더링하는 동안 부작용을 수행하지 마십시오"였습니다. 렌더링을 순수한 계산으로 생각하십시오. 부작용은 다른 위치로 이동합니다(클래스의 수명 주기 메서드 또는 함수 구성 요소의 useEffect). 그 이상은 없습니다.

"기능 구성 요소 A가 상태를 변경하면 상태 설정자를 전달하는 하위 구성 요소 B를 렌더링해서는 안 됩니다(그때 바로 반환해야 함). 왜냐하면 하위 구성 요소가 상태를 렌더링하고 변경하면 문제가 발생하기 때문입니다."

여기에 아직 오해가 있는 것 같아요. 상태 설정자를 자식 구성 요소에 전달하는 것은 완벽합니다. 항상 괜찮았고, 앞으로도 그럴 것입니다.

문제는 렌더링하는 동안 호출하는 것 입니다. 일반적으로 완전히 불필요해야 합니다. 구체적인 예가 없으면 왜 그러는지 짐작하기 어렵습니다. 그래서 도움이 어렵습니다.

이 두 대화의 일반적인 주제는 우리가 원을 그리며 가고 있다는 것입니다. 토론은 메타로 전환되었으며 특정 사례에 대해 이야기하는 대신 모호한 일반성에 대해 논의하고 있습니다. 서로 오해할 가능성이 높지만 구체적인 사례가 없기 때문에 오해를 풀기가 불가능하다.

이러한 이유로 이 스레드를 잠글 것입니다. 여기 계신 모든 분들의 의견에 진심으로 감사드립니다. 이 경고를 수정하는 데 어려움을 겪고 계신다면 더 많은 정보를 듣고 싶습니다. 도움을 받는 방법은 최소한의 재현 사례로 문제를 제기하는 것입니다. 그런 다음 구체적인 문제에 대해 논의하고 솔루션을 브레인스토밍하는 데 도움을 드릴 수 있습니다. 이것은 관련된 모든 사람에게 더 생산적이며, 이미 이 스레드에 댓글을 달고 구독을 마친 수십 명의 사람들에게 이메일을 보내는 것을 피할 것입니다. 감사합니다!

작은 업데이트로(모두에게 핑을 보내서 죄송합니다) https://github.com/final-form/react-final-form/issues/751#issuecomment -606212893을 사용하는 사람들을 위해 이러한 오류를 해결했다고 들었습니다. 도서관.