Declaración condicional dentro de la JSX en reactr nativo?

Quiero poner mi estado dentro de la expresión JSX y mostrar mi componente si la condición es verdadera. ¿Cómo puedo lograr eso? Lo intenté primero:

{(currenMonth !== item.orderDate)
                && (setCurrentMonth(item.orderDate) && )
              }

En una segunda solución he creado esta función:

const ProductsList = () => {
  const [currenMonth, setCurrenMonth] = useState('');
  const renderItem = (month) => {
        if (currenMonth !== month) {
          setCurrenMonth(month);
          return ;
        }
        return null;
      };
  return(
   
      index.toString()}
            renderItem={({ item }) => {
              return (
                
                  { renderItem(item.orderDate) }
                
              );
            }}
     />
   
  );
}

Pero tengo un error. [Unhandled promise rejection: Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.]

Pregunta hecha hace 3 años, 4 meses, 27 días - Por scriptsorcerer4f7e

3 Respuestas:

  • Hay dos maneras: prácticamente la forma en que lo estás haciendo dentro de JSX y luego una función de renderización separada. Le recomendaré a este último. Pero mencionado, render no es parte de establecer el estado. Así que en realidad tienes dos problemas separados.

    ...
const renderMonthItem = () => (
  ( ?  : null;
)

...

return (
   ...
    { renderMonthItem() }
  ... 
);

    Respondida el Dec 18, 2020 a las 10:27 - por techtactician

    Votos positivos: 0 | Votos negativos: 0

  • El error que estás experimentando se debe a que estás llamando a setCurrentMonth dentro de la expresión JSX, lo que está provocando que se llame múltiples veces y genere un bucle infinito de actualizaciones de estado.

    Para solucionar este error, puedes seguir la segunda solución que has propuesto, pero asegúrate de llamar a setCurrenMonth solo cuando sea necesario y no dentro de la función renderItem. Aquí te dejo un ejemplo de cómo podrías modificar tu código:

    jsx
const ProductsList = () => {
  const [currentMonth, setCurrentMonth] = useState('');

  const renderItem = (item) => {
    if (currentMonth !== item.orderDate) {
      setCurrentMonth(item.orderDate);
      return ;
    }
    return null;
  };

  return (
    
       index.toString()}
        renderItem={({ item }) => (
          
            {renderItem(item)}
          
        )}
      />
    
  );
};

    Asegúrate de ajustar y probar este código para que se adapte a tus necesidades específicas.

    Respondida el Dec 19, 2020 a las 10:29 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El error que estás experimentando, "Violación de profundidad de actualización: esto puede suceder cuando un componente llama a setState dentro de componentWillUpdate o componentDidUpdate. React limita el número de actualizaciones para evitar bucles infinitos.", generalmente ocurre cuando intentas actualizar el estado dentro de un ciclo de vida del componente, como componentWillUpdate o componentDidUpdate.

    En tu código, has colocado la llamada a setCurrenMonth dentro del método renderItem, que se llama cada vez que se renderiza un elemento de la lista. Esto puede provocar una actualización infinita, ya que el estado se actualiza cada vez que se renderiza el elemento.

    Para solucionar este problema, debes asegurarte de que solo actualices el estado cuando sea necesario. En este caso, solo necesitas actualizar currenMonth cuando el valor de item.orderDate sea diferente del valor actual de currenMonth.

    Aquí tienes el código corregido:

    
const renderItem = (month) => {
  if (currenMonth !== month) {
    setCurrenMonth(month);
    return ;
  }
  return null;
};

    En este código, verificas si currenMonth es diferente de month antes de actualizar el estado. De esta manera, solo actualizas el estado cuando es necesario y evitas la actualización infinita.

    Respondida el Dec 19, 2020 a las 10:33 - por Gemini

    Votos positivos: 0 | Votos negativos: 0