import React, { useState } from "react"; // import styles sheet: import "./css/CommentBlock.css"; // import profile avatars: import gamer from "./icons/gamer.png"; import man1 from "./icons/man (1).png"; import man from "./icons/man.png"; import user from "./icons/user.png"; import woman1 from "./icons/woman (1).png"; import woman from "./icons/woman.png"; let icons = [gamer, man1, man, user, woman1, woman]; let index = 0; function CommentBlock(props) { // JS object destructuring: let { name, comment } = props; index ++; console.log(index); return ( <li className="comment-block"> <div className="avatar"> <img src={icons[index % icons.length]} alt={name} /> </div> <div className="comment-info"> <h4 className="user-name">{name}</h4> <p className="comment-context">{comment}</p> </div> </li> ); } export default CommentBlock;valor índice: 1 3 5 7 9 11 ...
Estoy realmente confundido acerca del operador ++ en el componente de reacción. Tengo 7 bloques de comentarios, pero cuando uso index ++ en mi componente. Espero que el índice aumente solo una vez. pero el valor del índice aumentó dos veces.
quiero saber como solucionar este problema
El problema al que se enfrenta tiene que ver con el procesamiento de reacción (el ciclo de vida de reacción) y el hecho de que, en el modo de desarrollo, reacciona usa el Modo estricto, lo que provoca un procesamiento doble de su componente; además, está utilizando una variable para almacenar sus datos. cualquier representación de su componente causa el aumento del índice, creo que para su caso, muestra el uso del estado de reacción.
El modo estricto no puede detectar automáticamente los efectos secundarios, pero puede ayudarlo a detectarlos haciéndolos un poco más deterministas. Esto se hace mediante una doble invocación intencional de las siguientes funciones:
Métodos constructor, render y shouldComponentUpdate de componente de clase Método getDerivedStateFromProps estático de componente de clase Cuerpos de componentes de función Funciones de actualización de estado (el primer argumento de setState) Funciones que se pasan a useState, useMemo o useReducer Nota:
Esto solo se aplica al modo de desarrollo. Los ciclos de vida no se invocarán dos veces en el modo de producción.
https://reactjs.org/docs/strict-mode.html#gatsby-focus-wrapper
Tomado de los documentos oficiales de reacción, puede leer sobre el modo estricto y más explicaciones sobre el estado y el ciclo de vida de reacción.