无法将项目推入 React Js 中的列表

Question

I want to push the tip which I'm calculating in #this.calculate onto tip_arr[]. In that I'm not able to access my first item of as it is showing ["",item,item]. Here my first item is getting empty just the string. Here I'm calculating per person tip how much he is paying and after that diplay that.

export default class Calculation extends React.Component {

constructor(props) {
    super(props)
    this.state = {
        amount: '',
        tip_per: '',
        name: '',
        tip: '',
        name_arr:[],
        tip_arr:[]
    }

    this.handle = (event) => {
        this.setState({ tip_per: event.target.value });
    }

    this.calculate = () => {
        this.setState({ tip: ((this.state.amount) * this.state.tip_per) / 100 })
        this.name_change()
        this.tip_change()
    }

    this.name_change=()=>{
        let{name_arr,name}=this.state
        name_arr.push(name)
    }

    this.tip_change=()=>{
       let{tip_arr,tip}=this.state
       tip_arr.push(tip)
    }

}
   render(){
       return(
        <>
        <div className='Header'>
            <header>Tip Calculator<br />Build in React</header>
        </div>

        <div className='Input'>
            <h4>Enter the Bill Amount:-</h4>
            <input type='number' className='width' value={this.state.amount} 
                onChange={(e) => this.setState({ amount: e.target.value })}></input>
            <hr />
            <div className='inner'>
                <p>How was the Service:- <span>
                    <select  onChange={this.handle}>
                        <option>Choose...</option>
                        <option value={20}>Excellent:- 20%</option>
                        <option value={10}>Moderate:- 10%</option>
                        <option value={5}>Bad:- 5%</option>
                    </select>

                    <input type='text' className='filed' placeholder="Customer Name"
                        value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />

                    <button type='button' className='filed else' onClick={this.calculate}>Add Customer</button>
                </span></p>
            </div>

        </div>

        <div className='Output'>
            <p>Customer List:-</p><hr />
            <ul className='UL'>
                
               {this.state.name_arr.map((item,index)=>{
                   return <li key={index}>{item} offering a tip of</li>})}
           
           <span>                 <ul className='UL'>
                 {this.state.tip_arr.map((item,index)=>{ 
                     return <li key={index}>{item} rupees </li>})}
              </ul>
              </span>

              </ul>
            {console.log(this.state.name_arr)}
            {console.log(this.state.tip_arr)}
        </div>

</>

       )
   }



};

Answer 1

You're attempting to mutate a state variable. You have to update the value via setState . You should also pass setState a function instead of a plain object in this case so that you can access the correct value since state updates are asynchronous.

tip_change = () => {
  this.setState((prevState) => {
    const { tip, tip_arr } = prevState;
    return {
      tip_arr: [...tip_arr, tip]
    };
  });
}

Answer 2

You can't change state directly.

Do Not Modify State Directly.

Read how to use state correctly from React documentation

To update it, you need to call this.setState eg:

    this.tip_change=()=>{
       let{tip_arr,tip}=this.state
       this.setState(prevState => {
           let newTipArray = [prevState.tip_arr, tip]
           return {tip_arr: newTipArray }
       })
    }

This should also be the case for name_arr state. eg:

    this.name_change=()=>{
        let{name_arr,name}=this.state 
        
        //name_arr.push(name)      // can't manipulate state directly.
        this.setState(prevState => {
            let newNameArr = [prevState.name_arr, name]
            return {name_arr: newTipArray }
       })
    }

Update: as @Phishy, using second form of setState() that accepts a function rather than an object helps fix some of state quirks because of the asyncronous nature of React state.

Here is a nice article that explains why to Beware: React setState is asynchronous!