1

Простой пример :

class Element extends Component {
    constructor(props) {
        super(props);

        this.state = {
            name: props.name
        }
    }
    render() {
        return <p>{this.state.name}</p>
    }
}

class Elements extends Component {
    constructor(props) {
        super(props);

        this.state = {
            names: props.names
        }
    }
    render() {
        return <div>{
            this.state.names.map(function(name, i) {
                return <Element key={ i } name={ name } />
            })  
        }</div>
    }

    componentWillMount() {
        setTimeout(
            () => {
                this.state.names.splice(1, 1);
                let names = this.state.names;
                this.setState({names: names});
            },
            3000
        );
    }
}

ReactDOM.render(
    <Elements names={ [0, 1, 2] } />,
    document.body
);

Вообщем, создаем Element. Он в свойствах принимает name. Пишем name в состояние name. И выводим состояние name.

Elements принимает в свойства names - массив name для Element. names пишет в свое состояние names. Проходит в выводе состояние names и для каждого создает Element, передавая очередной name в свойства ему.

Дальше setTimeout - просто для примера, неважно как, но состояние names у Elements меняется. Удаляется какой-либо name из него. В итоге все Element перерисовываются и у каждого нужное свойство name. А вот состояние name не изменяется.

Стал проверять - да, constructor не срабатывает, когда Element перерисовывается. ComponentWillMount тоже. ComponentWillUnmount срабатывает для одного элемента, но не для того, который удалили, а для последнего почему-то.

Короче в итоге все выглядит так : Сначала на мониторе 0 1 2 , а затем 0 1 . А должно быть 0 2 .

Ни как не могу понять, почему так происходит...

2 ответа 2

2

Все дело в атрибуте key для Element :

render() {
    return <div>{
        this.state.names.map(function(name, i) {
            return <Element key={ i } name={ name } />
        })  
    }</div>
}

key должен быть уникальным для родственных итерируемых элементов. Здесь key - это индекс массива.

Элемент из массива удаляется, а индекс его остается и добавляется в key другого элемента. Из за этого React определяет такой элемент, как тот, который уже удалили.

1

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

Вот эта:

this.state.names.splice(1, 1);

Менять state напрямую нельзя.

this.state.smth = smthelse; // не надо так

this.setState({ //надо так
   smth: smthelse
})

Со стейтом стоит вести себя так, именно за счет того чтобы изменения стейта не конфликтовали с внутренними механизмами реакта.
В документации об этом кстати тоже говорят:

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

В вашем примере попробуйте что-то подобное:

let newNames = [...this.state.names.slice(0,1), ...this.state.names.slice(2)];
this.setState({
   names: newNames
});

Больше примеров как вести себя с массивами как с иммутабельными "из коробки" тут.

Также при работе в react-redux зачастую пользуются библиотеками которые предоставляют иммутабельные структуры из коробки, например Immutable.js

Про физический смысл key. Перестройка virtual dom, это в общем случае операция сложности O(n^3). Что для всяких списков - очень долго. Вот указание key - это способ сказать что полная перестройка по факту не нужна (большинство практических случаев), и уменьшить сложность этой операции до O(n). Ну то есть key нужен, без него бывают шансы нарваться на тупняки на ровном месте.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки