在 React 中更新状态数组长度

Question

I created a simple react to do list. But I want to display how many items are on that list. Every time I click submit I want to update totalItems.

1. Items - is array of list items.
2. Total Items - at first 0 because i'am not looking to store values. Later it becomes state.items.length.

My Thoughts: Using Componentdidmount() Did worked but it had many problems. First submit didn't update, first delete didn't update. There has to be a better way. But I'm out of ideas.

My Code

 this.state = { items: [], totalItems: 0, }; this.addItem = this.addItem.bind(this); this.deleteItem = this.deleteItem.bind(this); componentDidMount() { if (this.state.items.length > 0) { this.setState({ totalItems: this.state.items.length, }) } else { this.setState({ totalItems: 0 }) } this.forceUpdate(); } addItem(event) { this.componentDidMount(); } deleteItem(key) { this.componentDidMount(); } render() { return ( < div > Total Items { this.state.totalItems } < /div> ) }

Answer 1

Instead of storing a separate variable for the length of the items array, you can use this.state.items.length directly in the render method.

render() {
  return <div>Total Items {this.state.items.length}</div> 
}

 class App extends React.Component { state = { items: [] }; addItem = () => { this.setState(({ items }) => ({ items: [...items, Math.random()] })); }; render() { return ( <div> <div>Total Items {this.state.items.length}</div> <button onClick={this.addItem}>Add item</button> </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

var dataa = {
  name : "amine",
  op : []
}


class App2 extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

      myarray : dataa.op
     
   }
  }



  increment  = (e) => {


    e.preventDefault();
    const option = e.target.elements.namee.value; 
    console.log(option)
    this.state.myarray.push(option)
    this.setState({myarray : this.state.myarray })
    console.log(this.state.myarray)
  
  }

  
render() {
  return(


    <div>
      <p>{this.state.myarray.length}</p>

      <form onSubmit= {this.increment}>

          <input type="text" name  ="namee" />
          <button  type="submit">add option</button>


      </form>

    </div>

);


  }
 }

export default App2;