React.Почему не фильтрует массив? В handleDelete

116

12 ноября 2019, 00:30

Если выводит id элемента то все верно, map который выше работает, но filter нет, в чем проблема?

import React, {Component} from "react"; 
import "./scss/style.scss"; 
import todosArray from "./todosArray" 
import Header from "./components/Header"; 
import Todo from "./components/Todo"; 
 
class App extends Component { 
    constructor(props) { 
        super(props); 
        this.state = { items: todosArray}; 
        this.handleStatusChange = this.handleStatusChange.bind(this); 
        this.handleDelete = this.handleDelete.bind(this); 
    } 
 
    handleStatusChange(id) { 
       let resultList =  todosArray.map(todo => { 
            if (todo.id === id) { 
                todo.completed = !todo.completed; 
            } 
            return todo; 
        }); 
        this.setState({items: resultList}); 
    } 
 
    handleDelete(id) { 
        console.log(id); 
        let resultList = todosArray.filter(todo =>todo.id !== id); 
        this.setState({items: resultList}); 
        console.log(resultList) 
    } 
    render() { 
        return ( 
            <main> 
                <Header title={this.props.title}/> 
                <section className="todo-list"> 
                    { 
                        this.state.items.map(todo => 
                            < Todo 
                                key={todo.id} 
                                id={todo.id} 
                                title={todo.title} 
                                completed={todo.completed} 
                                onStatusChange={this.handleStatusChange} 
                                onDelete={this.handleDelete} 
                            /> 
                        ) 
                    } 
                </section> 
            </main> 
        ); 
    } 
} 
 
export default App; 
 
const todosArray = [ 
  { 
    id: 1, 
    title: "Изучить JavaScript c Николаем", 
    completed: true 
  }, 
  { 
    id: 2, 
    title: "Изучить React", 
    completed: false 
  }, 
  { 
    id: 3, 
    title: "Написать приложение", 
    completed: false 
  } 
]; 
 
export default todosArray;

Answer 1

Метод filter() создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции. дока

В вашей функции результат фильтрации ничему не присваивается, а в setState передается исходный "нефильтрованный" массив.

UPDATE по результатам комментариев:

Кроме указанной выше ошибки вы пытаетесь работать не со стейтом, а с константой, содержащей массив. Соответственно ничего не меняется.

Сделал рабочий пример

const todosArray = [ 
  { 
    id: 1, 
    title: "Изучить JavaScript c Николаем", 
    completed: true 
  }, 
  { 
    id: 2, 
    title: "Изучить React", 
    completed: false 
  }, 
  { 
    id: 3, 
    title: "Написать приложение", 
    completed: false 
  } 
]; 
 
class Todo extends React.Component { 
  onStatusChange = () => { 
    this.props.onStatusChange(this.props.id); 
  }; 
 
  onDelete = () => { 
    this.props.onDelete(this.props.id); 
  }; 
 
  render() { 
    return ( 
    <div class="card mb-3"> 
      <div class="card-body"> 
        <h5 class="card-title"> 
          {this.props.completed && 
            <i class="fa fa-check-square-o" aria-hidden="true"/> 
          } 
          {this.props.title} 
        </h5> 
      </div> 
      <div class="card-footer text-right"> 
        <button  
          type="button"  
          class="btn btn-primary" 
          onClick={this.onStatusChange} 
        >Завершить</button> 
        {' '} 
        <button  
          type="button"  
          class="btn btn-danger" 
          onClick={this.onDelete} 
        >Удалить</button> 
      </div> 
    </div>); 
  } 
} 
 
class App extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = {  
          items: todosArray 
        }; 
        this.handleStatusChange = this.handleStatusChange.bind(this); 
        this.handleDelete = this.handleDelete.bind(this); 
    } 
 
    handleStatusChange(id) { 
       let resultList =  this.state.items.map(todo => { 
         if (todo.id === id) { 
           todo.completed = !todo.completed; 
         } 
         return todo; 
       }); 
       this.setState({items: resultList}); 
    } 
 
    handleDelete(id) { 
        console.log(id); 
        let resultList = this.state.items.filter(todo =>todo.id !== id); 
        this.setState({items: resultList}); 
        console.log(resultList) 
    } 
    render() { 
        return ( 
            <main> 
                <section className="todo-list"> 
                    { 
                        this.state.items.map(todo => 
                            <Todo 
                                key={todo.id} 
                                id={todo.id} 
                                title={todo.title} 
                                completed={todo.completed} 
                                onStatusChange={this.handleStatusChange} 
                                onDelete={this.handleDelete} 
                            /> 
                        ) 
                    } 
                </section> 
            </main> 
        ); 
    } 
} 
 
ReactDOM.render( 
  <App/>, 
  document.getElementById('root') 
);

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
<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> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
<div id="root"></div> 
</div>