React.js oändlig loop när jag försöker använda setState och handleImage körs 4 ggr.

import React, { Component } from 'react';
import Ocean from './../images/ocean.jpg';
//import ReactFileReader from 'react-file-reader';
import Price from './Price';
import UploadImage from './UploadImage';
import './Sell.css';

class Sell extends Component {
    constructor(props) {
        super(props);
        this.state = {
            sport: "",
            title: "",
            text: "",
            price: "",
            picture: "",
            pictureName: "",
            name: "",
            email: "",
            phone: "",
            municipality: "",
            county: "",
            value: "",
       
        };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleSport = this.handleSport.bind(this);
        this.handleCounty = this.handleCounty.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleImage = this.handleImage.bind(this);
    }

   



    update() {

        this.setState({
            sport: this.refs.sport.value,
            title: this.refs.title.value,
            text: this.refs.text.value,
            price: this.refs.price.value,
            picture: this.refs.picture.value,
            name: this.refs.name.value,
            email: this.refs.email.value,
            phone: this.refs.phone.value,
            municipality: this.refs.municipality.value,
            county: this.refs.county.value
        })

       
               
    }

    handleSport(event) {
        this.setState({sport: event.target.value});
    }

    handleCounty(event) {
        this.setState({county: event.target.value});
    }

    handleImage(picture) {

        console.log(picture);

        

        const data = picture;

        let key = 'picture';
        console.log(picture[key]);
        let image = picture[key];

        this.setState({picture: image});
    }

    
    handleSubmit(event) {
        event.preventDefault();

        const image = this.refs.picture.value.split('C:\\fakepath\\')[1];

        const data = {
            sport: this.refs.sport.value,
            title: this.refs.title.value,
            text: this.refs.text.value,
            price: this.refs.price.value,
            picture: image,
            //picture: event.target.result,
            name: this.refs.name.value,
            email: this.refs.email.value,
            phone: this.refs.phone.value,
            municipality: this.refs.municipality.value,
            county: this.refs.county.value
        }
       
        console.log(data);

       

        fetch('http://localhost/reusesport/src/api/newadvertisment.php', {
            method: 'POST',
            body: JSON.stringify(data)
        })
        .then(resp => resp.text()) 
        .then(data => console.log(data))
        .then(resp=>console.warn("result", resp))

      
    }

   handleChange(event) {
      console.log('handleChange');
   }
    onSubmit = () => {
        
    }
  

  render() {
      
    return (
        <div className="Sell"> 
            <div className="Sell-picture">
                <div className="Sell-pictureimg"><img src={Ocean} alt="Reusesports" /></div> 
                <div className="Sell-Box">
                    <div className="Sell-innerbox">
                        <h1 className="Sell-title">Har du begagnad sportutrustning som inte används?</h1> 
                        <h2 className="Sell-intro">Sälj den hos oss, det finns många som gärna vill köpa dem.</h2>
                        
                        <form className="Sell-form" onSubmit={this.handleSubmit}>
                            <div className="Sell-innerBox">
                            <div className="Sell-sport Sell-input_title ">Välj sport</div>
                            <select className="Sell- Sell-input" id="sport" name="sport" ref="sport"  onChange={this.handleChange} onChange={this.handleSport} value={this.state.sport} required>
                                <option value="Badminton">Badminton</option>
                                <option value="Bandy">Bandy</option>
                                <option value="Basket">Basket</option>
                                <option value="Boxning">Boxning</option>
                                <option value="Brottning">Brottning</option>
                                <option value="Bågskytte">Bågskytte</option>
                                <option value="Cykelsport">Cykelsport</option>
                                <option value="Flygsport">Flygsport</option>
                                <option value="Fotboll">Fotboll</option>
                                <option value="Friidrott">Friidrott</option>
                                <option value="Dykning">Dykning</option>
                                <option value="Fäktning">Fäktning</option>
                                <option value="Golf">Golf</option>
                                <option value="Gymnastik">Gymnastik</option>
                                <option value="Handboll">Handboll</option>
                                <option value="Ishockey">Ishockey</option>
                                <option value="Innebandy">Innebandy</option>
                                <option value="Lacrosse">Lacrosse</option>
                                <option value="Kampsport">Kampsport</option>
                                <option value="Kanot">Kanot</option>
                                <option value="Klättring">Klättring</option>
                                <option value="Konståkning">Konståkning</option>
                                <option value="Motorsport">Motorsport</option>
                                <option value="Tennis">Tennis</option>
                                <option value="Ridsport">Ridport</option>
                                <option value="Rugby">Rugby</option>
                                <option value="Segling">Segling</option>
                                <option value="Skidsport">Skidsport</option>
                                <option value="Vattenskidor">Vattenskidor</option>
                                <option value="Vindsurfing">Vindsurfing</option>
                                <option value="Övriga">Övriga</option>
                            </select>    
                            </div>

                            <div className="Sell-innerBox">
                                <div className="Sell-sport Sell-input_title ">Ange titel</div>
                                <input className="Sell-input" id="title" name="title"  maxLength="30" type="text" ref="title" onChange={this.handleChange} onChange={this.update.bind(this)} required />
                            </div>  
                            <div className="Sell-innerBox">
                                <div className="Sell-sport Sell-input_title ">Ange en bra beskrivning av produkten</div>
                                <textarea className="Sell-input Sell-text" rows="4" cols="50" maxLength="500" name="text" id="text" type="text" ref="text" onChange={this.handleChange} onChange={this.update.bind(this)} required />
                            </div>
                            <div className="Sell-innerBox">
                                <div className="Sell-sport Sell-input_title">Ange pris</div>
                                <input className="Sell-price Sell-input" id="price" name="price" type="text" ref="price" onChange={this.handleChange} onChange={this.update.bind(this)} required/>
                            </div>
                            <div className="Sell-innerBox">
                                <div className="Sell-sport Sell-input_title ">Ladda upp bilder</div>+
                                <UploadImage picture={this.handleImage} ref="picture" id="picture" name="picture"  onChange={this.update.bind(this)} />
                            </div>
                            <div className="Sell-innerBox">
                                <div className="Sell-sport Sell-input_title">Ange ditt namn</div>
                                <input className="Sell-name Sell-input" id="name" name="name" type="text" ref="name" onChange={this.handleChange} onChange={this.update.bind(this)} required/>
                            </div>
                            <div className="Sell-innerBox">    
                                <div className="Sell-sport Sell-input_title ">Ange din mailadress</div>
                                <input className="Sell-mail Sell-input" id="email" name="email" type="text" ref="email" onChange={this.handleChange} onChange={this.update.bind(this)} required/>                            
                            </div>
                            <div className="Sell-innerBox">
                                <div className="Sell-sport Sell-input_title ">Ange det telefonnummer du vill köparna ska nå dig på</div>
                                <input className="Sell-mail Sell-input" id="phone" name="phone" type="text" ref="phone" onChange={this.handleChange} onChange={this.update.bind(this)} required/>
                            </div>
                            <div className="Sell-innerBox">
                                <div className="Sell-sport Sell-input_title ">Ange kommun</div>
                                <input className="Sell-municipality Sell-input" id="municipality" name="municipality" type="text" ref="municipality" onChange={this.handleChange} onChange={this.update.bind(this)} required/>
                            </div>
                            <div className="Sell-innerBox">
                            <div className="Sell-sport Sell-input_title ">Vilket län bor du i</div>
                            <select className="Sell-county Sell-input" id="county" name="county" ref="county" onChange={this.handleChange} onChange={this.handleCounty} value={this.state.county}>                                <option value="blekinge">Blekinge</option>
                                <option value="Dalarna">Dalarna</option>
                                <option value="Gotland">Gotland</option>
                                <option value="Gävleborg">Gävleborg</option>
                                <option value="Halland">Halland</option>
                                <option value="Jämtland">Jämtland</option>
                                <option value="Jonkoping">Jönköping</option>
                                <option value="Kalmar">Kalmar</option>
                                <option value="Kronoberg">Kronoberg</option>                                <option value="norrbotten">Norrbotten</option>
                                <option value="Skåne">Skåne</option>
                                <option value="Stockholm">Stockholm</option>
                                <option value="Södermanland">Södermanland</option>
                                <option value="Uppsala">Uppsala</option>
                                <option value="Värmland">Värmland</option>
                                <option value="Västerbotten">Västerbotten</option>
                                <option value="Västernorrland">Västernorrland</option>                                <option value="vastermanland">Västermanland</option>
                                <option value="Västragötaland">Västra Götaland</option>
                                <option value="Örebro">Örebro</option>
                                <option value="Östergötland">Östergötland</option>
                            </select>   
                            </div>
                            <div className="Sell-innerBox">     
                                <input className="Sell-submit" id="sub" type="submit" value="Lägg upp annonsen" />
                            </div>
                        </form>
                    </div>    
                </div>  
            </div>

            <Price price={this.state.price}/>
        </div>

    );
  }
}

export default Sell;

import React, { Component } from 'react';
import "./UploadImage.css";

class UploadImage extends Component {

    
    constructor(props) {
      super(props);
      this.state = {
          picture: '',
          file: '',
          imagePreviewUrl: ''
        };

        this.loadPicture = this.loadPicture.bind(this);
    }

  
  
    loadPicture(e) {
      e.preventDefault();

      const {file} = this.state;
      const {onSubmit} = this.props;

      onSubmit(file);
    }
  
    handleImageChange(e) {
      e.preventDefault();
  
      let reader = new FileReader();
      let file = e.target.files[0];

      
  
      reader.onloadend = () => {
        this.setState({
          file: file,
          imagePreviewUrl: reader.result
        });
      }

       this.setState({picture: this.refs.picture.value});

      reader.readAsDataURL(file)
    }
  
    render() {


      let {imagePreviewUrl} = this.state;
    
      this.props.picture(this.state);
      let $imagePreview = null;
      if (imagePreviewUrl) {
        $imagePreview = (<img src={imagePreviewUrl} />);
      } else {
        $imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
      }
  
      return (
        <div>
            <form onSubmit={this.loadPicture}>
            <input className="fileInput" type="file" id="picture" name="picture" ref="picture" value={this.state.picture} picture={this.props.picture(this.state.imagePreviewUrl)} multiple accept=".jpg, .jpeg, .png" onChange={(e)=>this.handleImageChange(e)}  required/>
            </form>
          <div className="imgPreview">
            {$imagePreview}
          </div>
        </div>
      )
    }
  }
    
export default UploadImage;