Hide
И ещё отображение списков li из массива через map()
Александр
Ну это классовый компонент)
Александр
Видимо еще старые уроки смотришь)
Александр
Или курс старый)
Hide
Оттуда сперто: https://codewithmosh.com/p/mastering-react
Hide
Там год даже не указан
Hide
Что то есть про функциональные компоненты
Hide
Александр
Ну норм
Значит курс исторически построен. Тоже хорошо
Hide
Hide
превед ) объясните пожалста я не понимаю
Hide
import React, { Component } from 'react';
import { getMovies } from '../services/fakeMovieService';
class Movies extends Component {
state = {
movies: getMovies()
}
handleDelete = movie =>{
const movies = this.state.movies.filter(m=> m._id !== movie._id);
this.setState({movies: movies});
};
render() {
return (
<main className='container'>
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Stock</th>
<th>Rate</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.movies.map(movie => (
<tr key={movie._id}>
<td>{movie.title}</td>
<td>{movie.genre.name}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
<td><button onClick={()=>this.handleDelete(movie)} className="btn btn-danger">Delete movie</button></td>
</tr>))}
</tbody>
</table>
</main>
);
}
}
export default Movies;
Hide
Hide
вот это что за структура... вроде метод с аргументом?
Hide
Hide
и вот тут почему масло масляное какое то
Hide
Hide
а это массив с объектами если что
Hide
const movies = [
{
_id: "5b21ca3eeb7f6fbccd471815",
title: "Terminator",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 6,
dailyRentalRate: 2.5,
publishDate: "2018-01-03T19:04:28.809Z"
},
{
_id: "5b21ca3eeb7f6fbccd471816",
title: "Die Hard",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 5,
dailyRentalRate: 2.5
},
{
_id: "5b21ca3eeb7f6fbccd471817",
title: "Get Out",
genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
numberInStock: 8,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd471819",
title: "Trip to Italy",
genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
numberInStock: 7,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd47181a",
title: "Airplane",
genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
numberInStock: 7,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd47181b",
title: "Wedding Crashers",
genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
numberInStock: 7,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd47181e",
title: "Gone Girl",
genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
numberInStock: 7,
dailyRentalRate: 4.5
},
{
_id: "5b21ca3eeb7f6fbccd47181f",
title: "The Sixth Sense",
genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
numberInStock: 4,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd471821",
title: "The Avengers",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 7,
dailyRentalRate: 3.5
}
];
Hide
почему у объекта появляется какое то свойство с его же названием или это просто плохой пример
honey
honey
судя по названию функция хендл муви удаляет фильм
honey
как минимум с экрана пользователя
honey
либо из массива, из которого рендерится списко фильмов
honey
а что* непонятно?
Hide
по клику на эту кнопку у тебя отработает колбек функция
в теле кот. вызывается метод хендл делет (в хендл делит передаётся movie)
Да чето вид этой функции смутил что сразу стрелочная
Hide
Че так можно чтоле? ©
honey
есть фанкшн декларейшн
фанкшн экспрешн
эрроу фанкшн
Hide
honey
попробуй написать одной переменной
honey
может сойдет
honey
если нет - оставь так
honey
мб у сет стейт такой синтаксис, что надо через двоеточие писать (я не помню)
Hide
ладно погоди ) вернемся к первому вопросу
Hide
если просто так написать то ничего не покажет
Hide
()=>{
console.log('Превед!')
}
Hide
а вот так уже все ясно понятно
Hide
const m = ()=>{
console.log('Превед!')
}
m()
Hide
так почему в этих скобках магических { } все сразу работает
Hide
в реакте
Hide
видимо самовызывание какое то происходит
honey
у тебя какая проблема то ?
honey
сформулируй пожалуйста что именно тебе надо сделать
honey
а то мне кажется мы о чем-то абстрактном рассуждаем
Hide
или получается
Hide
<td><button onClick={()=>this.handleDelete(movie)} className="btn btn-danger">Delete movie</button></td>
Hide
что тут вызов этой стрелки только от события зависит?
Hide
само событие запускает эту функцию
Hide
вот оно че
Hide
верно думаю?
honey
колбек функция в данном случае будет вызвана только когда, когда сработает клик
honey
ведь колбек функция передана именно в событие Клик
Hide
уф
Hide
мб у сет стейт такой синтаксис, что надо через двоеточие писать (я не помню)
тогда ждем других потому что откуда это взялось не пойму
Hide
там же объект movies
Hide
откуда через двоеточие опять movies
honey
подчеркни красным на скрине что тебе непонятно
Hide
что за извращение
honey
я же тебе сказала откуда
Hide
у меня там все выделено
honey
у тебя есть стейт, который содержит movies
Hide
попробуй написать одной переменной
там дальше пример убирается двоеточие и остается только movies
honey
ты сетишь стейт (его значение movies ) значением
Hide
handleDelete = movie =>{
const movies = this.state.movies.filter(m=> m._id !== movie._id);
this.setState({movies});
};
Hide
и всё работает также
Hide
что за сетишь
Hide
аааа
honey
это уже другой вопрос
Hide
honey
работает видимо потому, что в жс можно записать одной переменной И название ключа И его значение
в случае, если и ключ и значение - совпадают
honey
я тебе выше говорила