React: 运行子组件中的函数运行所有同类子组件中的函数

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: 为 child

的构造函数添加了说明...

EDIT4：添加代码以使答案有意义。

Answer 1

因此，在对问题进行一些处理之后，我找到了解决问题的方法。解决方案是为每个 child 元素创建两个单独的数组，并通过 props.

将它们放入每个 child 中

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>
        );
    }
}

child 代码几乎保持不变。换句话说，一个函数被多次调用不是问题，而是每个 child 都在修改同一个数组。我将在问题中添加代码以更好地阐明这一点（我应该添加更多信息，所以我不好）。

React: 运行子组件中的函数运行所有同类子组件中的函数

React: Running function in child component runs function in all child components of same kind

javascript

reactjs

react-component

React: 运行 子组件中的函数运行所有同类子组件中的函数

React: Running function in child component runs function in all child components of same kind

javascript

reactjs

react-component

React: 运行子组件中的函数运行所有同类子组件中的函数