1

Tengo el siguiente problema, tengo varios picker de react native, con un map para mostrar sus opciones, pero cuando cambio el valor de uno se me cambia en los demás porque tengo el mismo estado para todos como haría para manejar un estado para cada picker, teniendo en cuenta que el numero de picker tambien es dinámico (puede ser n)...

import React, { useState } from "react";
import { View, Picker, StyleSheet } from "react-native";

const App = () => {
  const [selectedValue, setSelectedValue] = useState("");
   const data = [
    {id: '1', color: 'azul'},
    {id: '2', color: 'rojo'},
    {id: '3', color: 'verde'},
    {id: '4', color: 'amarillo'}
  ];
  return (
    <View>
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
      >
        {data.map(dato => {
            return (<Picker.Item value={dato.id} label={dato.color} key={dato.id} />)
          })
        }
      </Picker>
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
      >
        {data.map(dato => {
            return (<Picker.Item value={dato.id} label={dato.color} key={dato.id} />)
          })
        }
      </Picker>
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
      >
        {data.map(dato => {
            return (<Picker.Item value={dato.id} label={dato.color} key={dato.id} />)
          })
        }
      </Picker>
    </View>
  );
}

export default App;

1 respuesta 1

0

Si los Picker son dinámicos, entonces los estas trayendo con una consulta o alguna API. Si es así, entonces lo que debes hacer es iterar los Picker y por cada picker cargar su estado inicial. Luego el estado vale según su posición en la iteración dinámica.

import React, { useState, useEffect } from "react";
import { View, Picker } from "react-native";

const App = () => {
  const [loaded, setLoaded] = useState(false);
  const [selectedValue, setSelectedValue] = useState([]);
  const [fetchedListPickers, setFetchedListPickers] = useState([]);
   const data = [
    {id: '1', color: 'azul'},
    {id: '2', color: 'rojo'},
    {id: '3', color: 'verde'},
    {id: '4', color: 'amarillo'}
  ];
  useEffect(() => {
    if(!loaded){
      //HAZ EL FETCH O CARGA AQUÍ LOS DATOS DINÁMICOS DE LOS PICKER. EJEMPLO DE RESULTADO DEL FETCH
      setFetchedListPickers = ([ 
        { data: { name: "pick1" }},
        { data: { name: "pick2" }},
        { data: { name: "pick3" }}, 
        { data: { name: "pick4" }}
      ]);
      //AHORA GENERAMOS UN ARRAY QUE GUARDARÁ LOS ESTADOS VACIOS PARA CADA PICKER
      const initStates = fetchedListPickers.map(() => "" ); // ["", "", ""...]
      setSelectedValue(initStates);
    }
    //NO VOLVEREMOS A REPETIR ESTE PASO A MENOS QUE RECARGUES EL COMPONENTE
    setLoaded(true);
  });

  const onChengeValuePicker = (value, index) => {
    let arr = selectedValue;
    arr[index] = value;
    setSelectedValue(arr);
  }

  const displayPickers = () => {
    //ITERA CADA PICKER Y LUEGO ITERA CADA ITEM CON UN VALUE HACIENDO REFERENCIA A LA POSICIÓN DEL PICKER
    return fetchedListPickers.map((picker, i) => (
      <View key={i}>
        <Text>{picker.name}</Text>
        <Picker 
          selectedValue={selectedValue.length > 0 ? selectedValue[i] : null}
          onValueChange={(value, index) => onChengeValuePicker(value, index) }
          style={{ height: 50, width: 150 }}
        >
          {data.map(dato => (<Picker.Item value={dato.id} label={dato.color} key={dato.id} />))
        }
        </Picker>
      </View>
    ));
  };
  return (
    <View>
      {fetchedListPickers.length > 0 && displayPickers()}
    </View>
  );
}

export default App;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.