Php 如何将数据库中的图像动态地放入react carousel？

我在PHP中有一个用于获取图像的API，并希望在下面显示它。我不知道我哪里做错了，但图像不会显示在传送带上。在过去的三天里，我一直在尝试这件事，但最终什么也没显示出来。谁能帮帮我吗

import React from "react";
import {Link} from "react-router-dom";
import "./cropSelection.css";
import Carousel, { Dots } from '@brainhubeu/react-carousel';
import '@brainhubeu/react-carousel/lib/style.css';
import 'react-image-picker/dist/index.css'
import axios from 'axios';

class CropSelection extends React.Component {
handleChange = selectedOption => {
  this.setState({ selectedOption });
  console.log(`Option selected:`, selectedOption);
};
constructor(props) {
  super(props)
  this.state = {
    selectedOption: null,
    image: "",
    slides: []
      //(<img src = "https://i.postimg.cc/wjfpKgHg/Apple-1.png" className="fruit-images" alt="Pomegranate fruit" />)
  }
  this.onPick = this.onPick.bind(this);
}
componentDidMount = () => {

  fetch('http://localhost/fruit_api/carousel_api.php')
  .then((response) => response.json())
  .then(data => {
    console.log(data)
    let slides = data.map((pic) => {
      return(
        <div key = {pic.img}>
          <img src = {pic.img} />
        </div>
      )
    })
    this.setState({
      slides: slides
    })
    console.log("state", this.state.slides);
  })
  .then(function(response){
    console.log(response)
  })
  .catch(function(response){
    console.error(response)
  });
}

onPick = (image) => {
  this.setState({image})
}    

render() {
     return (
         <div className="caurosel-div">

         <Carousel
          arrows
          slidesPerScroll={1}
          slidesPerPage={3}
          value={this.state.value}
          slides = {this.state.slides} 
          onChange={this.onchange}
          >
     </Carousel> 
    <Dots value={this.state.value} onChange={this.onchange} number={this.state.slides.length} />
    </div>
   );
  }
}

从“React”导入React；
从“react router dom”导入{Link}；
导入“/cropSelection.css”；
从“@brainhubeu/react Carousel”导入旋转木马，{Dots}；
导入“@brainhubeu/react carousel/lib/style.css”；
导入“react image picker/dist/index.css”
从“axios”导入axios；
类CropSelection扩展了React.Component{
handleChange=selectedOption=>{
this.setState（{selectedOption}）；
log（`Option selected:`，selectedOption）；
};
建造师（道具）{
超级（道具）
此.state={
selectedOption:null，
图像：“”，
幻灯片：[]
//()
}
this.onPick=this.onPick.bind（this）；
}
componentDidMount=（）=>{
取（'http://localhost/fruit_api/carousel_api.php')
.then（（response）=>response.json（））
。然后（数据=>{
console.log（数据）
让幻灯片=data.map（（pic）=>{
返回(
)
})
这是我的国家({
幻灯片：幻灯片
})
log（“state”，this.state.slides）；
})
.然后（功能（响应）{
console.log（响应）
})
.catch（函数（响应）{
控制台错误（响应）
});
}
onPick=（图像）=>{
this.setState（{image}）
}    
render（）{
返回(
);
}
}

carousel.php

<?php
include_once('database/include.php');
$conn = mysqli_connect("localhost", "root", "", "farmer_portal");

if(!$conn)
    die("Error connecting to DB". mysqli_connect_error());

if($_SERVER['REQUEST_METHOD'] == "GET")
{
    $sel = "SELECT link from images";

    $res = mysqli_query($conn, $sel);

    if(mysqli_num_rows($res) > 0)
    {
        $users = array();
        while($rows = mysqli_fetch_assoc($res))
        {
            $details=array(
                "img" =>  $rows['link']
            );
            array_push($users, $details);
        }
        sendResponse(200,$users,'Images');
    }
    else 
    {
        sendResponse(404,[],'Images not available');
    }
}
?>

---

开发者的工具图像

指出问题在于数据的分配。

data

对象由整个响应体组成，因此map函数无法工作。写这篇文章的更好方法是

fetch('http://localhost/fruit_api/carousel_api.php')
    .then((response) => response.json())
    .then(data => {
       const { data } = data // getting data attribute out of the response object
       let slides = data.map((pic, k) => {
           return(
              <div key = {k}>
                  <img src = {pic.img} />
              </div>
           )
       })
      this.setState({
         slides //this is interpreted as {slides: slides}
      })

  }).catch(function(response){
       console.error(response)
  });

fetch（'http://localhost/fruit_api/carousel_api.php')
.then（（response）=>response.json（））
。然后（数据=>{
const{data}=data//从响应对象中获取数据属性
让幻灯片=data.map（（图，k）=>{
返回(
)
})
这是我的国家({
幻灯片//这被解释为{slides:slides}
})
}).catch（函数（响应）{
控制台错误（响应）
});

你能分享你的PHP代码吗？是的，我编辑了这个问题

sendResponse（）

函数做什么？它以json格式回送数据…函数sendResponse（$resp_-code，$data，$message）{echo json_-encode（数组（'code'=>$resp-code，'message'=>$message，'data'=>$data））；你能在浏览器的开发工具中看到这个响应吗？