Bonjour, je suis nouveau développeur à ReactJS. J'ai une question sur les crochets. Je sais qu'il y a tellement de réponses à propos de cette quête, mais je n'ai pas intégré à ce projet à mon projet. J'ai un composant parent et enfant. Je passe la valeur de l'enfant au parent. Lorsque j'essaie d'envoyer des données via une fonction de rappel réagissant, le parent est re-rendu tout en prenant de l'article et j'ai donc perdu ma valeur choisies sur l'enfant. Comment puis-je protéger ces problèmes? Pourriez-vous vous conseiller?
composant parent: composant enfant:
3 Réponses :
Vous pouvez simplement transmettre la valeur code> sélectionnée code> de la composante parent sur enfant et initier l'état sélectionné à l'aide de ces accessoires.
import React,{useCallback,useState} from 'react'
const Dropable = ({item}) => {
const [list, setList] = useState(item)
const [selectedItems, setSelectedItems] = useState<Array<any>>([])
const handleSelectedItems = useCallback( (data: any) => {
if (data.type === "player") {
if (selectedItems.length === 0) {
const arr = selectedItems
arr.push(data)
setSelectedItems(arr)
}
}, [selectedItems],
)
return (
{list.map((data: any, index: any) => {
const isSelected = selectedItems.findIndex(item => item.[some_unique_attribute] === data.[some_unique_attribute]) > -1;
return (
<>
{
<div onClick={() => handleSelectedItems(index, data)}>
<Detailed
key={uuid()}
data={data}
dataIndex={index}
selected={isSelected}
/>
</div>
}
</>
)
})}
)
}
Comment la composante enfant connaîtra-t-elle les données connexes DIV? Selon vous, chaque enfant sera sélectionné. Si vous examinez mon code, il y a une liste pour la fonction de mappage.
Vous pouvez calculer quel enfant est sélectionné à l'aide de la liste et de Selectelist dans le composant parent et passez la valeur sélectionnée. Donc, quand je dis Passez la valeur sélectionnée, je ne voulais pas passer la valeur true.
Salut au lieu de maintenir la valeur booléenne chez l'enfant pour voir si l'élément est sélectionné ou non, vous pouvez transmettre cette valeur de parent à l'enfant.
Donc, le composant parent: et votre composant enfant:
Il n'est pas nécessaire d'utiliser usestate pour définir la valeur CoZ Nous faisons le même travail dans le composant parent. P> import React,{useState} from 'react'
const Detailed : React.FC<IProps> = (props) {
return (
<div className="detail" style={props.selected?{border: " 1px solid
#5c6ef5"}: {}}>
</div>
)
}
export default Detailed;
La seule raison pour laquelle votre enfant perd son état lorsque le parent renouille est dû au fait que vous attribuez une nouvelle clé à la composante enfant tout en mappant
attribuer une clé unique mais reste identique à celle des re-rendus empêcher ce problème de se produire
si la clé d'un composant change, elle n'est pas re-rendue mais de re-montée et donc les valeurs d'état sont réinitialisées
soit que vous pouvez utiliser A. valeur unique en tant que clé à partir de données ou d'utilisation alternative index s'il n'y a pas de clé unique dans les données. Cependant, vous devez essayer d'avoir au moins 1 champ dans des données pouvant être utilisées pour l'identifier de manière unique
Juste une refactoring que vous pouvez faire à l'intérieur de votre
handleselect une meilleure façon plutôt que si seulementSEselected (! sélectionné) . À propos de vous question n'est pas sûr que si c'est quelque chose autour de vos accessoires clés.Je l'ai déjà essayé. Rien ne change.