reactjs - 为什么重置事件不更新状态

Question

这里的方法 handleReset() 将计数器状态的每个值重置为零。但是状态没有得到更新。为什么会这样？

  state={
    counters:[
      {id:1,value:3},
      {id:2,value:7},
      {id:3,value:6}
    ]
   }
  

  handleReset = () => {
        const counters = this.state.counters.map(c => {
            c.value = 0
            return c
        })
        console.log(counters.value)
        this.setState({ counters })
    }

日志将值显示为零。但状态仍显示原始值

标签： reactjs

Answer 1

您没有在 setState 中设置值计数器您必须将计数器设置为等于计数器

    import React from 'react';
    import ReactDOM from 'react-dom';
    
  
    
    class App extends React.PureComponent {
       constructor(props){
         super(props);
         this.state={
        counters:[
          {id:1,value:3},
          {id:2,value:7},
          {id:3,value:6}
        ]
       }
    
       this.handleReset = this.handleReset.bind(this);
       }
    
        handleReset = () => {
            const counters = this.state.counters.map(c => {
                c.value = 0
                return c
            })
           
            this.setState({ counters:counters })
 console.log("counters1",this.state.counters)
        }
        render() {
           console.log("counters",this.state.counters)
          
            return (
               <div>
            <button onClick={this.handleReset}> Reset</button>
               </div>
            );
        }
    
     
    }
    
    ReactDOM.render(
        <App />,
        document.querySelector('my-app')