Declaración condicional en reactr-native

Question

Necesito ayuda. Me perdí un poco en mi código para establecer una condición. Básicamente quiero establecer una casilla de verificación que buscará el stock de un producto. Mi variedad de información de producto se almacena en este.state.displayArray. Si el producto está en stock, así que si este.state.displayArray.stock 0 la casilla está comprobada. en realidad suena simple y creo que es pero necesito una mano de ayuda para asegurarme de hacerlo bien, no sé dónde añadir la condición, en la función o directamente en la casilla de verificación. Gracias por tu ayuda. export default class Stock extends Component { constructor(props) { super(props); this.state = { stock : true, } }; initListData = async () => { let list = await getProducts(1); if (list) { this.setState({ displayArray: list, loadMoreVisible: (list.length >= 15 ? true : false), currentPage: 2 }); console.log(this.state.displayArray) } }; async UNSAFE_componentWillMount() { this.initListData(); console.log(this.state.displayArray) } render() { return ( Stock ); } } displayArray: (por ahora es un vuelo pero cambiará, tengo a alguien trabajando en API) Array [ Object {  cost : 0,  created_at :  2020-12-14T15:54:50Z ,  custom_fields : Object {  _161_ :  4137 ,  _162_ :  48 ,  _163_ :  10926 ,  _164_ :  0 ,  _165_ :  FLY ,  _166_ :  2020-12-14T14:54:37.737Z ,  _167_ :  2020-12-31T14:54:37.737Z ,  _168_ :  0 ,  _171_ :  0 ,  _300_ :  412:00 ,  _301_ :  45.725556|5.081111 ,  _302_ :  -27.7078990936|-67.0951004028 ,  _303_ :  Lyon Saint-Exupéry Airport ,  _304_ :  Londres/Belén Airport ,  _310_ :  60 , },  description :   ,  family_id : 0,  id : 1061,  incl_tax : 0,  is_visible : 1,  name :  Lyon Saint-Exupéry Airport (14/12/2020 à 15:54) > Londres/Belén Airport (31/12/2020 à 15:54) ,  photo :   ,  quantity : 0,  reference :   ,  stock_status :  1 ,  tax_rate_id : 0,  unit :   ,  updated_at :  2020-12-14T15:54:50Z ,  weight : 0, }, Object {  cost : 0,  created_at :  2020-11-15T01:38:08Z ,  custom_fields : Object {  _161_ :  1373 ,  _162_ :  30 ,  _163_ :  4680 ,  _164_ :  0 ,  _165_ :  FLY ,  _166_ :  2020-11-21T00:37:00.000Z ,  _167_ :  2020-11-29T00:37:00.000Z ,  _168_ :  0 ,  _171_ :  0 ,  _300_ :  190:00 ,  _301_ :  43.6539083949|-79.65785399079999 ,  _302_ :  -22.285699844399996|-62.7136993408 ,  _303_ :  Tarten Heliport ,  _304_ :  Santa Victoria Airport ,  _310_ :  -480 , },  description :   ,  family_id : 0,  id : 896,  incl_tax : 0,  is_visible : 1,  name :  Tarten Heliport (2020-11-21 at 16:37) > Santa Victoria Airport (2020-11-29 at 16:37) ,  photo :   ,  quantity : 0,  reference :   ,  stock_status :  1 ,  tax_rate_id : 0,  unit :  FLY ,  updated_at :  2020-11-15T01:38:08Z ,  weight : 0, }, ]

Gpt · Accepted Answer

Para lograr lo que deseas, primero necesitas determinar si un producto está en stock o no utilizando la información almacenada en this.state.displayArray. En tu caso, puedes agregar la condición dentro del método render() donde se renderiza la casilla de verificación.

Aquí te dejo un ejemplo de cómo puedes modificar tu código para lograrlo:

jsx
export default class Stock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      displayArray: [],
    }
  };

  initListData = async () => {
    let list = await getProducts(1);

    if (list) {
      this.setState({
        displayArray: list,
        loadMoreVisible: (list.length >= 15 ? true : false),
        currentPage: 2
      });
      console.log(this.state.displayArray)
    } 
  };

  async componentDidMount() {
    this.initListData();
  }

  render() {
    return (  
      
        {
          this.state.displayArray.map(product => (
            
              {product.stock_status === "1" ? (
                
              ) : (
                
              )}
              {product.name}
            
          ))
        }
      
    );
  }
}

En este ejemplo, se recorre this.state.displayArray y para cada producto se muestra una casilla de verificación que está marcada si el producto está en stock (stock_status === "1") y desmarcada si no está en stock.

Recuerda adaptar este código a tus necesidades específicas y ajustar la lógica de cómo determinar si un producto está en stock según los datos que recibes de la API.

Respondida el Dec 19, 2020 a las 08:22 - por Gpt

Gemini · Answer

Función de renderizado condicional: La forma correcta de implementar una condición en la casilla de verificación es dentro de la función de renderizado condicional. Esto te permite verificar el stock y establecer el estado de la casilla de verificación en consecuencia. Código actualizado: javascript render() { return ( Stock ); } Explicación: this.state.displayArray[0].stock accede al primer elemento del array displayArray y verifica su propiedad stock. Si stock es 0, la casilla de verificación se marcará. Si stock es cualquier otro valor, la casilla de verificación no se marcará. Beneficios: Esta solución mantiene la lógica condicional dentro de la función de renderizado, lo que hace que el código sea más fácil de mantener y leer. La condición se evalúa cada vez que se vuelve a renderizar el componente, lo que garantiza que la casilla de verificación refleje siempre el estado actual de stock. Nota:* El código asume que el primer elemento de displayArray siempre contiene la información del producto. Si esto no es cierto, es posible que deba ajustar el índice del array para apuntar al producto correcto.

Declaración condicional en reactr-native

2 Respuestas: