Javascript 如何使用react分离数组中的项

user.js

import React，{useState，useffect}来自“React”；
从“Axios”导入Axios；
const RecommendationDetail=（）=>{
const[image，setImage]=useState（[]）；
useffect（（）=>{
loadRekko（）；
}, []);
const loadRekko=async（）=>{
const res=等待Axios.get(`http://localhost:3001/dashboard-rekko/${id}`{
标题：标题
}); 
console.log（res.data.response）；
var数组=[]；
设a=（res.data.response.rekkoRecords.product\u img）
数组。推送（a）
setImage（数组）===>>>如何使数组符合我的要求
console.log（图像）
SETRecommension（res.data.response.rekkoreRecords）
}
返回(
{image.map（（it）=>{
返回(
)
})}
)
}

---

一切正常，但我想显示多个图像。我在

“uploads\classpamplate.png，uploads\classpamplate1.jpg”

这个格式中得到了一个响应，在数组中推送它之后，它变成了

[“uploads\classpamplate.png，uploads\classpamplate1.jpg”

，但我想要的是

[“uploads\classpamplate.png”，“uploads\classpamplate1.jpg”]

两者都是分开的，因此我可以使用

.map（）

函数来显示它。任何帮助都将不胜感激

您可以使用

，

拆分它们，以便将其转换为数组

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>
            )
            
        })}
 )
}

或

您可以直接调用

setImage

，如下所示

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

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

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

---

您可以使用

，

拆分它们，以便将其转换为数组

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>
            )
            
        })}
 )
}

或

您可以直接调用

setImage

，如下所示

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

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

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

您可以使用逗号分隔该字符串

，

：

split（）

请参见下面的一个实时示例：


const data=`uploads\classpamplate.png，uploads\classpamplate1.jpg`
const result=data.split（'，'）
console.log（result）
您可以使用逗号分隔该字符串
，
：

split（）

请参见下面的一个实时示例：


const data=`uploads\classpamplate.png，uploads\classpamplate1.jpg`
const result=data.split（'，'）
log（result）
只需将字符串拆分为
，
。它将返回一个新数组

let a = (res.data.response.rekkoRecords.product_img)
setImage(a.split(','))

只需将字符串拆分为
，
。它将返回一个新数组

let a = (res.data.response.rekkoRecords.product_img)
setImage(a.split(','))

我想
a=“uploads\classpamplate.png，uploads\classpamplate1.jpg”

预期结果=[“uploads\classpamplate.png”，“uploads\classpamplate1.jpg”]

不要在数组中按
a
，请尝试以下操作

let result = (res.data.response.rekkoRecords.product_img).split(',');
let array = [...result];

我想
a=“uploads\classpamplate.png，uploads\classpamplate1.jpg”

预期结果=[“uploads\classpamplate.png”，“uploads\classpamplate1.jpg”]

不要在数组中按
a
，请尝试以下操作

let result = (res.data.response.rekkoRecords.product_img).split(',');
let array = [...result];

你可以在这里得到答案：你可以在这里得到答案：我如何检查是否没有图像它不会显示任何内容，如果我有一个图像，那么它的长度为1，如果没有图像，那么它的长度也为1我已经更新了答案，以检查收到的响应是否为空，然后拆分。请检查。我如何检查是否没有图像它不会显示任何内容，如果我有一个图像，那么它的长度为1，如果没有图像，那么它的长度为1。我已更新答案，以检查收到的响应是否为空，然后拆分。请查收。