Как да предавам състояние между компонентите в reactj (Пълен код)

В тази публикация ще обясня как да предавам състояние между компонентите в Reactjs. Ще създадем малко приложение „Колко книги прочетохте?“, в това приложение имаме два основни компонента, един голям, наречен „Библиотека“ и друг малък „Книга“, имаме 3 книги в състояние на библиотека и всяка книга има собствена държава. проверете всяка книга, за да я отчетете като прочетена. изпробвайте приложението тук

Да започнем с кода:

Предаване на състоянието от родител на дете

В нашия компонент Библиотека имаме това състояние

this.state = {
	reads: 0,
	books: [
		{
			name: 'Zero to one',
			isbn: '9780804139298',
			author: 'Peter Thiel',
			cover: 'https://images.gr-assets.com/books/1414347376l/18050143.jpg',
			status: false
		},
		{
			name: "The Manager's Path",
			isbn: '9781491973899',
			author: 'Camille Fournier',
			cover: 'https://images.gr-assets.com/books/1484107737l/33369254.jpg',
			status: false
		},
		{
			name: 'Calculus, Better Explained',
			isbn: '9781470070700',
			author: 'Kalid Azad',
			cover: 'https://images.gr-assets.com/books/1448590460l/27993945.jpg',
			status: false
		}
	]
};

и искате да създадете this.state.books.length - като число - Book компонента, всеки от които има подпори от books масива на състоянието на Libraryкомпонента. Трябва да се справим с двата компонента.

Първо с родителя, трябва да създадем Book компонента this.state.books.length - като число - пъти и да му предадем нашите различни стойности по този начин:

„Пълният код тук“

{
	this.state.books.map((_book, _id) => {
		return (
			<Book
				handleCounter={this.handleCounter}
				key={_id}
				id={_book.isbn}
				name={_book.name}
				isbn={_book.isbn}
				author={_book.author}
				cover={_book.cover}
			/>
		);
	});
}

Забележка игнорирайте handleCounter засега.

Второ с детето Book, имаме стойностите от родител, нека ги използваме:

„Пълният код тук“

...
render() {
	return (
		<Card>
			<Image
				src={this.props.cover}
    			alt="Book cover"
...

Досега създадохме 3 Book компонента от родителския компонент Library и зададохме техните стойности от родителското състояние. лесно! нали Чудесно, започваме втората част

Предаване на състояние от дете към родител

В този раздел искаме да обработим броя на книгите, които четете, като поставите отметка във всяка книга.

В нашето Book имаме това състояние

„Пълният код тук“

this.state = {
	status: false,
	id: this.props.id
};

Забележка не забравяйте да предадете props на конструктора на компонента.

status означава дали сте чели тази книга или не и стойността му по подразбиране е false, id е идентификаторът на тази книга и аз го задавам по идентификатор на книга, както научихме в предишния раздел.

трябва да обработим промяната на този статус, след което да актуализираме масива книги в родителското състояние.

В нашия Book компонент ще добавим квадратче за отметка, което получава промяната на състоянието на книгата и ще предава this.handleChange на нейното onChangeevent по следния начин:

„Пълният код тук“

<input type="checkbox" name="example" onChange={this.handleChange} />

първо трябва да обвържете функцията, след това да актуализирате състоянието Book с новия статус, след като актуализираме дъщерното състояние, ние ще актуализираме състоянието на родителя Library по следния начин:

„Пълният код тук“

handleChange() {
		this.setState({status: !this.state.status}, this.updateLibraryCount);
    }
updateLibraryCount() {
		this.props.handleCounter(this.state);
	}

В updateLibraryCount използвахме handleCounter функцията на Library като проп, след което му предадохме състоянието Book. Сега Library вижда състоянието Book, Страхотно! нека го използваме.

„Пълният код тук“

handleCounter(_State) {
        //Get the index of this book by searching by its unique isbn
        const ObjNum = this.state.books.findIndex(
			_book => _book.isbn === _State.id
        );
        //then update its value in the Library component
		this.setState(
			{
				books: update(
					ObjNum,
					{...this.state.books[ObjNum], status: _State.status},
					this.state.books
				)
			},
			() => {
                //this is a callback to handle the new change of the book status and increment the reads
				const _read = this.state.books.filter(_book => _book.status === true)
					.length;
				this.setState({reads: _read});
			}
		);
	}

Надявам се, че разбирате как да предадете състоянието от родител на дете и обратно. Ето „пълния код“, а това е „оригиналната публикация в моя блог“. Ако имате въпроси, не се колебайте да ги зададете в коментарите или по имейл.