时间戳

首页 > 解决方案 > 如何使用反应分隔数组中的项目

javascript - 如何使用反应分隔数组中的项目

问题描述

用户.js

import React, { useState, useEffect } from 'react';
import Axios from 'axios';

const RecommendationDetail = () => {
  const [image, setImage] = useState([]);

  useEffect(() => {
    loadRekko();
}, []);


  const loadRekko = async () => {
    const res = await Axios.get(`http://localhost:3001/dashboard-rekko/${id}`,{
        headers:headers
    }); 


    console.log(res.data.response);
    var array = [];
    let a = (res.data.response.rekkoRecords.product_img)
    array.push(a)
    setImage(array)    ====>>> How can i make array like i want
    console.log(image)
    setRecommendation(res.data.response.rekkoRecords)
  }

 return (
    {image.map((it) => {
            return (
                <div key={it}>
                    <img src= {'http://localhost:3001/'+it} />
                </div>
            )
            
        })}
 )
}

一切正常，但我想显示多个图像。我得到了"uploads\classpamplate.png,uploads\classpamplate1.jpg"这种格式的响应，在将它推入数组后它变成了，["uploads\classpamplate.png,uploads\classpamplate1.jpg"]但我想要的是["uploads\classpamplate.png","uploads\classpamplate1.jpg"]两者都是分开的，以便我可以使用.map()函数显示它。任何帮助将不胜感激

标签： javascriptarraysreactjsredux

解决方案

您可以使用拆分它们，,以便将其转换为数组

let a = (res.data.response.rekkoRecords.product_img).split(",");
array.push(...a)

或者

直接你可以setImage像下面这样调用

setImage(res.data.response.rekkoRecords.product_img.split(","));

检查响应是否为空然后拆分

let a = (res.data.response.rekkoRecords.product_img);
a = a && a.split(",") || []
setImage([...a])

推荐阅读