условный рендеринг не работает с react

#javascript #reactjs

Вопрос:

У меня есть мое состояние, и я хочу отобразить компонент, если значение равно true, но в консоли я получаю сообщение об ошибке Не удается обновить во время существующего перехода в состояние (например, внутри render ). Методы визуализации должны быть чистой функцией реквизитов и указывать мой код

 import React, { useState} from "react";
import { useToasts } from "react-toast-notifications";

const Index = () => {

  const [test, setTest]= useState(true);
  const { addToast } = useToasts();

  function RenderToast() {

    return (
      <div>
        { addToast('message') }
      </div>
    )}

    return (
      <div>
        {test amp;amp;  <RenderToast /> }
      </div>
    )

  

}

Ответ №1:

Вы объединяете возврат RenderToast компонента с возвратом из Index . Разделите их, чтобы вы возвращали некоторые JSX, RenderToast а затем возвращали JSX на Index основе значения состояния.

 function Index() {

  const [test, setTest] = useState(true);
  const { addToast } = useToasts();

  function RenderToast() {
    return (
      <div>
        { addToast('message') }
      </div>
    );
  }

  return (
    <div>
      {test amp;amp;  <RenderToast /> }
    </div>
   );

}

Ответ №2:

Я не знаю, что делает useToasts (), но я думаю, что вы пытаетесь изменить состояние во время фазы рендеринга.

Попробуйте это:

 function Index() {

      const [test, setTest] = useState(true);
      const { addToast } = useToasts();

      function RenderToast() {
        const [toast, setToast] = useState(null)

        useEffect(() => {
            setToast(addToast('message'));
        });

        return (
          <div>
            { toast }
          </div>
        );
      }

      return (
        <div>
          {test amp;amp;  <RenderToast /> }
        </div>
       );

    }

1. Я пытаюсь, но получил эту ошибку: useToasts крючок должен быть вызван от потомка ToastProvider .

2. Пожалуйста, добавьте дополнительные сведения, чтобы расширить свой ответ, например, ссылки на рабочий код или документацию.

3. Затем вы можете обернуть <RenderToast /> (или любого из его предков) с ToastProvider

Ответ №3:

Я делаю это, но это не работает, я получил ту же ошибку

 function Index() {

  const [test, setTest] = useState(true);
  const { addToast } = useToasts();

  function RenderToast() {
    return (
      <div>
        { addToast('message') }
      </div>
    );
  }

  return (
    <div>
      {test amp;amp;  <RenderToast /> }
    </div>
   );

}