Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

144
Visualizações
guardar referencias dinámicas en la matriz en el componente de clase en react-native solo guarda el último índice

Tengo un componente de clase con vues creadas dinámicamente y quiero acceder a esas referencias de vues, así que decidí guardar todas las referencias en una matriz de objetos para acceder a ellas más tarde. pero cada vez que trato de acceder a las referencias, siempre se refiere al último índice, lo que significa que el índice del mapa siempre es igual al último valor solamente.

aquí hay un ejemplo para demostrar el comportamiento

 
import React, {Component} from 'react';
import {View, Text, TextInput, Button} from 'react-native';

class myComponent extends Component {
 constructor(props) {
 super(props);
 this.state = {};
 }

 data = [1, 2, 3];

 inputsRefs = new Array(3).fill({
 input1: null,
 input2: null,
 index: null,
 });

 async componentDidMount() {}

 render() {
 return (
 <View>
 {this.data.map((x, i) => {
 this.inputsRefs[i].index = i;
 return (
 <View key={i+''}>
 <TextInput ref={ref => (this.inputsRefs[i].input1 = ref)} />
 <TextInput ref={ref => (this.inputsRefs[i].input2 = ref)} />
 </View>
 );
 })}

 <Button
 title="print indexes"
 onPress={() => {
 console.log(this.inputsRefs.map(x => x.index));
 //the result is [2,2,2] while it should be [0,1,2]
 }}
 />
 </View>
 );
 }
}

export default myComponent;

editar Agregar clave no afectó los resultados finales

almost 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

Intente configurar el apoyo key dentro del bucle del mapa. Así que aquí está el método de representación:

 ...
 render() {
 return (
 <View>
 {this.data.map((x, i) => {
 this.inputsRefs[i].index = i;
 return (
 <View key={`key-${i}`}>
 <TextInput ref={ref => (this.inputsRefs[i].input1 = ref)} />
 <TextInput ref={ref => (this.inputsRefs[i].input2 = ref)} />
 </View>
 );
 })}

 <Button
 title="print indexes"
 onPress={() => {
 console.log(this.inputsRefs.map(x => x.index));
 //the result is [2,2,2] while it should be [0,1,2]
 }}
 />
 </View>
 );
 }
...
almost 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda