ReactJS - просмотр не перерисован после обновления состояния с использованием слайса - PullRequest
Новая
       7

ReactJS - просмотр не перерисован после обновления состояния с использованием слайса

0 голосов
/ 22 мая 2018

Это мой класс Content, который отображается внутри App.js.Я прочитал учебник ReactJS и понимаю, что мне нужно изменить данные без мутации.

https://reactjs.org/tutorial/tutorial.html

Но даже когда я использую slice, приложение не выполняет повторную визуализацию в состоянииизменения.

Этот класс управляет колодой карт, как показано ниже: 

//omitted imports
import main_deck from ...
import side_deck from ...

export default class Content extends Component {
    constructor(props) {
        super(props);
        this.moveToMainDeck = this.moveToMainDeck.bind(this);
        this.state = {
            mainDeck : main_deck,
            sideDeck : side_deck
        }
    }

    moveToMainDeck(card) {
        const fromDeck = this.state.sideDeck.slice(); //copy the state data
        const toDeck = this.state.mainDeck.slice();

        var movable = checkMovability(fromDeck, toDeck, card);
        if (movable[0] === 1) { //use slice instead of splice
            var newMain = toDeck.slice(0, movable[1]).concat([card]).concat(toDeck.slice(movable[1]));

            var cardIndexInSideDeck = fromDeck.indexOf(card);
            var newSide = fromDeck.slice(0, cardIndexInSideDeck).concat(fromDeck.slice(cardIndexInSideDeck + 1));

            this.setState({ mainDeck : newMain, sideDeck : newSide });
        }
        else if (movable[0] === -1)
            alert("Unable to move. Main Deck is full.");
        else //movable[0] === 0
            alert("Unable to move. Limit reached for this card in Main Deck.");
    }

    render() {
        return (
            <div><MainDeck ... /><SideDeck ... /></div>
        );
    }
}

С помощью приведенного выше кода я проверяю данные о состоянии, распечатывая массив JSON, состояние меняется после this.setState, но представление по-прежнему не перерисовывается.

Тем не менее, я протестировал, заменив slice() на push(), все перерисовывается после изменений состояния, например: fromDeck.push(card); или toDeck.push(card);

Кто-нибудь, пожалуйста, скажите, что не так с slice, который я использую.Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Вы можете попробовать использовать , как предлагается здесь : 

const fromDeck = JSON.parse(JSON.stringify(this.state.sideDeck))

Это должно создать совершенно новую копию.

0 голосов
/ 22 мая 2018

Это потому, что функция slice создает поверхностную копию, что означает, что она копирует только структуру объекта, что также означает, что поля объекта не копируются, только ссылки являются общими, поэтому при изменении в объекте copy исходный объект такжеизменяется, поэтому при реакции сравнивает различие, которое не находит ни одного, и поэтому не выполняет повторную визуализацию. 

//Example

var one=[{'a':'first'},{'b':'second'}]
var two=one.slice()
var three=two.slice(0,1)
three[0].a='third'

//Now in all variables (one,two,three) a will have value of 'three'
...