Question

为什么我更改状态时组件Eachcartitem没有得到重新渲染。我有这个功能从Everycartitem组件内部调用： -

cartremover(a){
     var cart1=cart;
     var firstpart=cart.slice(0,a);  
     var secondpart=cart.slice(a+1,cart.length);  
     var final = firstpart.concat(secondpart);   
     this.setState({
        cartstate:final,
        abc:true
     })
}

Everycartitem在父组件中使用如下： -

<div style={{float:'left',width:'65%'}}>
                {
                    this.state.cartstate.map((cat) => (<Eachcartitem data={cat} index={this.state.cartstate.indexOf(cat)} cartremover={i=>this.cartremover()}/>))               
                }
                <br></br><br></br>
            </div>

Everycartitem如下： -

class Eachcartitem extends React.Component{
    constructor(props){
        super(props);
        this.state={
            data:this.props.data
        };        

    }

    clicker(){
        this.props.cartremover(this.props.index);
    }

    render(){
        return(
            <div className='cartdiv'>

                <div style={{width:'100%',display:'inline'}}>
                    <h3 style={{width:'70%',float:'left',paddingLeft:'10px'}}>{this.state.data.productName}</h3>
                    <div style={{float:'right'}}>Rs.{this.state.data.productPrice}</div>
                    <div style={{width:'30%',float:'left',paddingLeft:'10px'}}>Store:{this.state.data.shopName}</div>
                    <div style={{width:'30%',float:'left',paddingLeft:'10px'}}>Quantity:{this.state.data.productQuantity}</div>


                    <br></br><br></br><br></br><br></br><br></br>
                    <div style={{width:'auto',float:'left',paddingLeft:'10px'}}>Variant:{this.state.data.variant.quantity}</div>
                    <br></br><br></br><br></br><br></br>
                    <div style={{width:'auto',float:'right',marginRight:'7px'}} onClick={()=>this.clicker()}>&#10060;</div>
                </div>

            </div>

        );
    }
 }
 export default Eachcartitem

但由于某种原因，cartitem divs没有改变，为什么会这样呢？

Answer 1

因为你没有将项目的索引传递给函数，这里：

cartremover={i => this.cartremover()}

像这样写：

cartremover={i => this.cartremover(i)}

您无需将索引传递给子组件，请使用以下代码：

this.state.cartstate.map((cat, i) => (
    <Eachcartitem data={cat} cartremover={e => this.cartremover(i)} />
))

现在从Eachcartitem开始简单地调用该方法：this.props.cartremover()。

最好使用splice删除特定索引处的元素，编写如下方法：

cartremover(a){
    let cart = [...this.state.cartstate];
    cart.splice(a, 1);

    this.setState({
        cartstate: cart,
        abc: true
    })
}

检查工作代码段：

const Temp = (props) => <div>
  {props.name}
  <button onClick={props.cartremover}>Delete</button>
</div>

class App extends React.Component {
  constructor() {
    super()
    this.state = {cart: ['a', 'b', 'c', 'd', 'e']}
  }
  
  cartremover(a){
    let cart = [...this.state.cart];
    cart.splice(a, 1);

    this.setState({
      cart,
    })
  }
  
  render() {
    return (
      <div>
        {this.state.cart.map((cart, i) => (
          <Temp key={cart} name={cart} cartremover={e => this.cartremover(i)}/>
        ))}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />

为什么我的组件在使用setState并更改状态值时不会重新呈现？

1 个答案: