Saya mencoba menampilkan gambar dari database dan mengulanginya dengan peta. Berikut kodenya:

class Container extends React.Component
{
   
    state ={
        userData:[]
      }
    
    
     
    fethData= async()=>{
      fetch("http://localhost:5000/user") // could be any rest get url
      .then(response => response.json())
      .then(result =>
        this.setState({
          userData: result
         
        })
      );
    }
 
    
    
    componentDidMount() {
       this.fethData();
       
       alert(this.state.userData);
     
        $(function(){  
            //Make every clone image unique.  
              var counts = [0];
               var resizeOpts = { 
                 handles: "all" ,autoHide:true
               };    
              $(".dragImg").draggable({
                                    helper: "clone",
                                    //Create counter
                                    start: function() { counts[0]++; }
                                   });
           
           $("#dropHere").droppable({
                  drop: function(e, ui){
                          if(ui.draggable.hasClass("dragImg")) {
                $(this).append($(ui.helper).clone());
              //Pointing to the dragImg class in dropHere and add new class.
                    $("#dropHere .dragImg").addClass("item-"+counts[0]);
                       $("#dropHere .img").addClass("imgSize-"+counts[0]);
                           
              //Remove the current class (ui-draggable and dragImg)
                    $("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");
           
           $(".item-"+counts[0]).dblclick(function() {
           $(this).remove();
           });     
               make_draggable($(".item-"+counts[0])); 
                 $(".imgSize-"+counts[0]).resizable(resizeOpts);     
                  }
           
                  }
                 });
           
           
           var zIndex = 0;
           function make_draggable(elements)
           {    
               elements.draggable({
                   containment:'parent',
                   start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
                   stop:function(e,ui){
                   }
               });
           }    
           
           
               
              });
    }
    
    

    changeColor(params) {
        this.setState({
            color: params.target.value
        })
    }

    changeSize(params) {
        this.setState({
            size: params.target.value
        })
    }
    
    render() {
      
        return (
            
                    <div className="container">
                        <div className="tools-section">
                            <div className="color-picker-container">
                                Select Brush Color : &nbsp; 
                                <input type="color" value={this.state.color} onChange={this.changeColor.bind(this)}/>
                            </div>

                            <div className="brushsize-container">
                                Select Brush Size : &nbsp; 
                                <select value={this.state.size} onChange={this.changeSize.bind(this)}>
                                    <option> 5 </option>
                                    <option> 10 </option>
                                    <option> 15 </option>
                                    <option> 20 </option>
                                    <option> 25 </option>
                                    <option> 30 </option>
                                </select>
                            </div>

                        </div>
                
                        <div className="board-container">
                            
                            
                        
                            <h4>Select picture!</h4>
                        
                                
                                   
                              
                         
                                    
                                           
                                            {this.state.userData.map((data) => (
                                            
                                            <div class="dragImg">
                                                
                                                  
                                                 <img src={data.picture} class="img"/> // column data received
                                               
                                                
                                              </div>
                                            ))}
                             
                                   
                                
                    
                        
                        
                            <div  id="dropHere">
                                
                            <Board color={this.state.color} size={this.state.size}></Board></div>
                            
                        </div>
                    
                    </div>
           
        );
    }

    
}



export default Container

Saya ingin memasukkan data dari fungsi fethData ke dalam array userData. Tetapi ketika saya menjalankan situs web saya mendapat peringatan bahwa userData tidak terdefinisi. Mengapa tidak ada yang ditambahkan ke userData?

Ini adalah data json yang diambil dari database:

[{"idpictures":1,"picture":"images/kitten.jpg","title_picture":"Cat"},{"idpictures":2,"picture":"images/puppy.jpg","title_picture":"Dog"}]

Saya ingin data disimpan seperti ini:

userData:[{idpictures:1,picture:"images/kitten.jpg",title_picture:"Cat"}]

Teman-teman saya memecahkannya. Inilah yang saya ubah tentang kode saya:

constructor(){
     super();
      this.state ={
          userData:[]
        }
    }
    
  
    
    
    async componentDidMount() {
      const url = "http://localhost:5000/user";
      const response = await fetch(url);
      const data = await response.json(); 
      this.setState({userData: data});
      console.log(this.state.userData);
       
       if (this.state.userData) {alert(this.state.userData)}



0
dvid vid 11 Mei 2021, 13:58

3 jawaban

Jawaban Terbaik

Anda harus menentukan status komponen dalam konstruktor. Juga semua pengambilan data di JS tidak sinkron. Perhatikan .then dalam fungsi pengambilan yang Anda tulis. Ini berisi kode yang akan dieksekusi setelah respons kembali.

class Container extends React.Component
{
   constructor(props) {
     super(props)
     this.state ={
       userData:[]
    }
   }
    
    fethData = async() => {
      fetch("http://localhost:5000/user") // could be any rest get url
      .then(response => response.json()) // you might not need this, depends on the response
      .then(result =>
        this.setState({
          userData: result
         
        })
      );
    }
 
    componentDidUpdate() {
       alert(this.state) // This should show your data (when it gets here)
    }
    
    componentDidMount() {
       this.fethData();
       
       alert(this.state.userData); // this will fire before the response from localhost:5000/user gets here
    }
        
}
export default Container
0
Mikaels Slava 11 Mei 2021, 12:01

ReactJS berbeda dari Vue, gunakan: this.state.userData untuk mengakses userData. Dan fetchData adalah fungsi asinkron, Anda tidak bisa mendapatkan hasilnya secara sinkron.

0
Deng Xuening 12 Mei 2021, 07:22

Berikut adalah contoh kerja

  fethData= ()=>{
    return new Promise((resolve, reject)=>{

     fetch("http://localhost:5000/user") // could be any rest get url
     .then(response => response.json())
     .then(result =>
       this.setState({userData: result},()=>{
           resolve();
       })
     );
    })
   }

  async componentDidMount(){
    await this.fetchData();
    alert(this.state.userData);
  }
0
Shubham 11 Mei 2021, 11:48