Question

I want to create a ToDo list, It store tasks in allTasks state and works when I push manually some data but doesn't show me in map function when I add an item with input.

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
            allTasks: []
        }

    this.addToList = this.addToList.bind(this);
    }

    addToList() {
        this.state.allTasks.push(this.state.inputValue);
    }

    render() {
        return (
          <div>
              <h1>کار های خود را مدیریت کنید !</h1>
              <input type="text" placeholder="کار خود را بنویسید ..." onChange={ event => this.setState({ inputValue: event.target.value }) } />
              <button onClick={ this.addToList }>ثبت کردن</button>
              <hr />
              <ul>
              {
                  this.state.allTasks.map(task => {
                      return <li>{ task }</li>;
                  })
              }
              </ul>
          </div>
        );
    }
}

Answer 1

You are mutating the original state. Dont mutate the state, and use setState to rerender the ui.

addToList() {
   let k = [...this.state.allTasks];
   k.push(this.state.inputValue);
   this.setState({allTasks: k})
}

or
addToList() {
   this.setState({allTasks: [...this.state.allTasks, this.state.inputValue]})
}

Directly changing the state does not rerender the ui. You should avoid mutating state directly. Also using setState to update the state will rerender the ui.

let k = [...this.state.allTasks]; creates a new array, and then we push a value to k. So in this case we are not mutating the state directly. Instead we are changing a newly created array. After that we are using setState to set the state which will update the ui.

Why map function in ES6 is not refreshed?

1 个答案: