提取数据时单选按钮的ReactJS问题

问题描述

我想用食物卡为我的网站构建菜单。我从我的其余api获取数据（食物名称，食谱，价格），然后在我的react应用程序上显示此数据。在这张食物卡中，我有三个单选按钮，分别用于迷你，中和最大价格。当我更改一张卡上的按钮时，所有卡上的按钮都会更改。 First image,when price 35和

Second image,when I change price on first card,but it changes on all cards

这是我的代码：

constructor(props){
    super(props);
    this.state = {
        shavermas : [],price : ''
    };
}

componentDidMount(){
    this.findAllPosts();
}

findAllPosts(){
    axios.get("http://localhost:8080/api/shaverma/all")
        .then(response => response.data)
        .then((data) => {
            this.setState({shavermas: data})
        });
}

onChange = e =>{
    this.setState({price : e.target.value})
}

 render(){
let {price} = this.state;
const {shavermas} = this.state;
return(
  <>
      {shavermas.map((shaverma,index) => (
    <div className="food-cart">
        <div className="product-img-div">
        <img
            src={shavermaPhoto}
            className="d-inline-block product-img"
            alt="shaverma"
          /> 
        </div>
        <div className="food-cart-body">
            <div>
            <h3>Шаверма <span>{shaverma.foodName}</span></h3>
            <p>{shaverma.recipe}</p>
                <form className="radio-buttons">
                    <div className="radio">
                        <label className="btn-radio">
                            <input type="radio" value={shaverma.priceMini} onChange={this.onChange} checked={price.charat(0) == '' ? shaverma.priceMini : price == shaverma.priceMini}/>
                            <span>Mini</span>
                        </label>
                    </div>
                    <div className="radio">
                        <label className="btn-radio">
                            <input type="radio" value={shaverma.priceMiddle} onChange={this.onChange} checked={price == shaverma.priceMiddle}/>
                            <span>Middle</span>
                        </label>
                    </div>
                    <div className="radio">
                        <label className="btn-radio">
                            <input type="radio" value={shaverma.priceMaxi} onChange={this.onChange} checked={price == shaverma.priceMaxi} />
                            <span>Maxi</span>
                        </label>
                    </div>
                </form>
                <div className="food-cart-footer">
                    <strong>{price.charat(0) === '' ? shaverma.priceMini : price}₴</strong>
                    <p>Хочу!</p>
                </div>
            </div>
        </div>
    </div>
      ))}
    </>
)

}

解决方法

You are using common Price state for all cards,you have to use price property for individual card,Use it like this : 

    onChange = (e,index) =>{
    let newShavermas = this.state.shavermas ;
    newShavermas[index].price=e.target.value;
    this.setState({price : e.target.value})
}
and while fetching the result include price property in each record
    findAllPosts(){
    axios.get("http://localhost:8080/api/shaverma/all")
        .then(response => response.data)
        .then((data) => {
            let dataVal = data.map(ele=>ele.Price='');
            this.setState({shavermas: dataVal })
        });
}


and in return call onChange like this :

    return(
  <>
      {shavermas.map((shaverma,index) => (
    <div className="food-cart">
        <div className="product-img-div">
        <img
            src={shavermaPhoto}
            className="d-inline-block product-img"
            alt="shaverma"
          /> 
        </div>
        <div className="food-cart-body">
            <div>
            <h3>Шаверма <span>{shaverma.foodName}</span></h3>
            <p>{shaverma.recipe}</p>
                <form className="radio-buttons">
                    <div className="radio">
                        <label className="btn-radio">
                            <input type="radio" value={shaverma.priceMini} onChange={(e)=>this.onChange(e,index)}  checked={shaverma.price.charAt(0) == '' ? shaverma.priceMini : price == shaverma.priceMini}/>
                            <span>Mini</span>
                        </label>
                    </div>
                    <div className="radio">
                        <label className="btn-radio">
                            <input type="radio" value={shaverma.priceMiddle} onChange={(e)=>this.onChange(e,index)}  checked={shaverma.price == shaverma.priceMiddle}/>
                            <span>Middle</span>
                        </label>
                    </div>
                    <div className="radio">
                        <label className="btn-radio">
                            <input type="radio" value={shaverma.priceMaxi} onChange={(e)=>this.onChange(e,index)}  checked={shaverma.price == shaverma.priceMaxi} />
                            <span>Maxi</span>
                        </label>
                    </div>
                </form>
                <div className="food-cart-footer">
                    <strong>{shaverma.price.charAt(0) === '' ? shaverma.priceMini : shaverma.price}₴</strong>
                    <p>Хочу!</p>
                </div>
            </div>
        </div>
    </div>
      ))}
    </>
)

   

,

这是因为您所有的购物车商品都具有相同的状态值！

onChange = e =>{
   this.setState({price : e.target.value}) < --- changes price to all cards
}

要解决此问题，您需要在每个price中都包含一个shaverma，然后单独进行更改。

我建议首先创建一个具有自己状态的FootCart组件。

类似的东西：

class FootCart implements React.Component {
   ...
   render() {
     return (
      <div className="food-cart">
      ...
      </div>
  }
}

class Cards implements React.Component {
   ...

   render(){
     return (
       <>
        {shavermas.map((shaverma,index) => (<FootCart props/>)}
       </>
     }
}

祝你好运！