Реакция: Запуск функции в дочернем компоненте запускает функцию во всех дочерних компонентах одного вида

Question

У меня есть проблема, когда при выполнении функции в одном дочернем компоненте все дочерние элементы одного типа, по-видимому, также запускают одну и ту же функцию. Вот как выглядит код:

class Wrapper extends React.Component {
...
constructor(){
    this.state = { items:[...] }
}
render(){
    return (
      <div>
        <Child id="child1id"... items={this.state.items}/>
        <Child id="child2id"... items={this.state.items}/>
      </div>  
    );
    }
}

class Child extends React.Component {
...
constructor(){
     this.state = { ..., items: this.props.items, ... };
     this.id = this.props.id;
}
orderArray(){...}
needsToScroll(){...}
setArray(){
   this.setState(state => ({ items: this.orderArray(this.state.items) }));
}
incrementArray(){
    this.setArray();
    $('.' + this.id + '.row').css("bottom", "0px");
    if(this.needsToScroll()){
        $('.' + this.id + '.row').animate({
            bottom: $('.' + this.id + '.row').outerHeight().toString() +"px"
        },
        1000, "linear");
        $('.' + this.id + '.row').promise().done(this.incrementArray.bind(this));
    }
    else{
        var new_array = this.state.items;
        new_array.map((item, index) => {
            new_array[index].index = index + 1;
        });
        this.setState(state => ({items: new_array}));
    }
}
componentDidMount(){
    if(this.needsToScroll()){
        this.incrementArray();
    }
    else{
        var new_array = this.state.items;
        new_array.map((item, index) => {
            new_array[index].index = index + 1;
        });
        this.setState(state => ({items: new_array}));
    }
}
...
render(){
    return (
        <div className="child">
        {this.rowTitle(this.state.rowTitles)}
            {this.state.items.map((item, index) => (
                <div key={this.id+index} className={this.isDivider(item)} style={this.rowStyle(item)} ref={this.rowRef}>
                    <div key={this.id + index.toString() + "1"} style={this.textStyle(item)}>{item.title}</div>
                    <div key={this.id + this.id + index.toString() + "2"} style={this.textStyle(item)}>{item.date}</div>
                    <div key={this.id + index.toString() + "3"} style={this.textStyle(item)}>{item.area}</div>
                </div>
            ))}
        </div>
    );
}
}

const WrapperComponent = ReactDOM.render(<Wrapper/>, document.getElementById("wrapper"));

Что происходит setArray вызывается дважды обоими компонентами с шагом в 1 секунду, когда они должны вызывать эту функцию только один раз, чтобы изменить свое собственное состояние с шагом в 1 секунду. Я предполагаю, что это потому, что incrementArray вызывается дважды из двух разных компонентов, что приводит к такому поведению.

Я убедился, что селекторы jQuery получают нужные компоненты через console.log и они делали это. Поэтому это единственный вывод, к которому я мог прийти. Если это правильно, как я могу убедиться, что каждый компонент вызывает функцию только один раз для состояния каждого отдельного компонента?

Я вырезал некоторые методы из кода. При необходимости я могу добавить их обратно. Код представляет собой представление о том, что это такое.

РЕДАКТИРОВАТЬ: прояснил проблему

EDIT2: добавлен обратно необходимый код

EDIT3: Добавлено уточнение... для конструктора ребенка

EDIT4: добавлен код, чтобы ответ имел смысл.

Answer 1

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

class Wrapper extends React.Component {
    constructor(props){
        super(props);
        this.state = { children: [{ name: "child1", items:[...]},                          
                                  { name: "child2", items:[...]}]};
    }
    render(){
        return (
            <div class="wrapper">
            {this.state.children.map((item) => (
                <Child id={item.name} ... items={item.items} />
            ))}
            </div>
        );
    }
}

Дочерний код остался почти таким же. Другими словами, проблема не в том, что функция вызывается несколько раз, а каждый дочерний элемент изменял один и тот же массив. Я буду добавлять код к вопросу, чтобы прояснить ситуацию лучше (я должен был добавить больше информации, так что мой плохой).