Почему react не показывает новый массив?

Question

[Suleymanov]

import { Component } from "react";
import getCharacters from "../getCharacters/getCharacters";
import OneCharacter from "../oneCharacter/oneCharacter";
import Button from "../button/button";
import rightArrow from '../../imgs/right-arrow.png';
import leftArrow from '../../imgs/left-arrow.png';
import './carousel.scss';


function composeCharacters(offset) {
    let arr = [];
    for (let i = 1; i <= 4; i++) {
        arr.push(<OneCharacter offset={offset + i} />);
    }
    return arr;
}


class Carousel extends Component {

    state = {
        offset: 4,
    }
    plusChars = () => {
            this.setState(({offset}) => ({
                offset: offset + 1
            }))
    }
    minusChars = () => {
        if (this.state.offset === 0) {
            return;
        }
        this.setState( ({offset}) => ({
            offset: offset - 1
        }))
    }
    onUpdate = () => {
        this.setState(({ offset }) => ({
            offset: offset + 4,
        }))
        console.log(this.state.persons);
    }
    render() {
        let arr = [...composeCharacters(this.state.offset)];
        console.log(arr);
        return (
            <section className="carousel">
                <div className="carousel__wrapper">
                    <div className="carousel__inner">
                        {arr}
                    </div>
                    <div className="carousel__buttons">
                        <div className="carousel__leftA" onClick={this.minusChars}><img src={leftArrow} alt="left arrow" /></div>
                        <div className="carousel__rightA" onClick={t<code lang="javascript">

</code>his.plusChars}><img src={rightArrow} alt="right arrow" /></div>
                    </div>
                </div>
                <Button name={'Add Hero'} onClick={this.onUpdate} />

            </section>
        )



    }

}
export default Carousel;

// Первые четыре элемента показывает нормально, а при нажатии на стрелки меняется offset и arr в render, но на экране всегда только первые четыре элемента. В массиве arr(render) тоже все меняется, я получаю другие элементы с сервера.

Comments

[szQocks]

вопрос оформи нормально, код вставь в тег для кода

[szQocks]

{Array.from({ length: this.state.offset }).map((_, i) => <OneCharacter key={i} offset={i + 1} />)}

[Suleymanov]

szQocks, А почему мой вариант не работает? Ведь state обновляется, arr тоже, следовательно render должен заново пройтись и заменить новый массив на старый?

[WbICHA]

на экране всегда только первые четыре элемента

for (let i = 1; i <= 4; i++) {

Действительно, почему же только 4?

[szQocks]

Suleymanov,

constructor() {
    super();
    this.state = {
        offset: 4,
    }
  }

?

[Suleymanov]

WbICHA, szQocks, там i прибавляется к offset. Еще раз пишу в arr который находится в render другие 4 элемента в отличие от тех, которые на экране. При на нажатии на стрелку к offset прибавляется один. Так я хотел динамически подгружать новый элемент и показывать его с тремя прошлыми

[szQocks]

WbICHA, я тоже кстати это заметил, да и заметил что он обращается к this.state хотя у него просто объявлена глобальная типа переменная которая становится свойством через state = {}

видимо врёт что у него там что-то работает, каких авторов только не встретишь

[szQocks]

WbICHA, а хотя нет там 4 будет) но про state я верно написал, не верно объявлен стейт

[szQocks]

Suleymanov,

import { Component } from "react";
import getCharacters from "../getCharacters/getCharacters";
import OneCharacter from "../oneCharacter/oneCharacter";
import Button from "../button/button";
import rightArrow from '../../imgs/right-arrow.png';
import leftArrow from '../../imgs/left-arrow.png';
import './carousel.scss';

class Carousel extends Component {

constructor() {
    super();
    this.state = {
        offset: 4,
    }
  }

    plusChars() {
            this.setState(({offset}) => ({
                offset: offset + 1
            }))
    }
    minusChars(){
        if (this.state.offset === 0) {
            return;
        }
        this.setState( ({offset}) => ({
            offset: offset - 1
        }))
    }
    onUpdate(){
        this.setState(({ offset }) => ({
            offset: offset + 4,
        }))
        console.log(this.state.persons);
    }
    render() {
        return (
            <section className="carousel">
                <div className="carousel__wrapper">
                    <div className="carousel__inner">
                        {Array.from({ length: this.state.offset }).map((_, i) => <OneCharacter key={i} offset={i + 1} />)}
                    </div>
                    <div className="carousel__buttons">
                        <div className="carousel__leftA" onClick={this.minusChars}><img src={leftArrow} alt="left arrow" /></div>
                        <div className="carousel__rightA" onClick={t<code lang="javascript">

</code>his.plusChars}><img src={rightArrow} alt="right arrow" /></div>
                    </div>
                </div>
                <Button name={'Add Hero'} onClick={this.onUpdate} />

            </section>
        )



    }

}
export default Carousel;

попробуй так

[Suleymanov]

szQocks, ваш способ установки state не отличается от моего(лишь небольшими нюансами), ваша строка работает, но не так как я хочу. Ваш вариант создает массив из 4 элементов, а при нажатии на стрелку просто добавляет элемент. Но я все еще хочу понять в чем разница с моим {arr} от {Array.from({ length: this.state.offset }).map((_, i) => )} ведь и там и там массив из компонентов?

[szQocks]

Suleymanov, особо ничем не отличается отрисовка, просто в твоём случае у них нет ключей

я просто предложил запись короче, это не решение к вопросу, так просто от скуки написал

результат тот который нужен или нет ? или всё ещё не так работает ?

[Suleymanov]

szQocks, А в ключах может быть проблема?

[szQocks]

Suleymanov,

ключи нужны что бы реакт понимал где какой компонент обновился в виртуальном доме, возможно и в ключах проблема, вот только есть ещё одна проблема, из вопроса - я не понял в чём проблема вахах)

[Suleymanov]

szQocks, спасибо зато я кажется я все понял

[szQocks]

Suleymanov, по факту эти компоненты должны пересоздаваться и перерисовываться, даже если и ключи не указаны, так как при любом изменении стейт - создаётся новый массив

скорее ошибка была в том - как был объявлен стейт, видимо из-за кривого объявления, компонент не перерисовывался - ну это мои догадки, я на классовых не пишу поэтому уже и не помню что там да как

[szQocks]

Suleymanov, ты можешь сказать, щас работает так как надо или нет ? и если работает так как надо - ответь сам на свой вопрос, и сделай ответ решением

Answer 1

[Suleymanov]

Все нашел я просто добавил key в функцию

function composeCharacters(offset) {
    let arr = [];
    for (let i = 1; i <= 4; i++) {
        arr.push(<OneCharacter offset={offset + i} key={offset+i} />);
    }
    return arr;
}

И все заработало, видимо react не понимал какие объекты изменились