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

发生的情况是，当两个组件仅以1秒的增量调用一次函数以修改其自身的状态时，两个组件以1秒的增量调用setArray两次。我认为这是因为incrementArray被两个不同的组件调用了两次，从而导致了这种现象。

我确保jQuery选择器通过console.log获得了正确的组件，并且他们正在这样做。因此，这是我唯一能得出的结论。如果正确的话，如何确保每个组件针对每个单独组件的状态仅调用一次函数？

我从代码中切出了一些方法。如有必要，我可以重新添加它们。该代码代表了它的存在。

编辑：澄清了问题

EDIT2：添加了必要的代码

EDIT3：为子类的构造函数添加了说明...

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

Answer 1

因此，在解决了该问题之后，我找到了解决该问题的解决方案。解决方案是为每个子元素创建两个单独的数组，然后通过props将它们带入每个子元素。

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

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

反应：子组件中的运行功能在所有同类子组件中运行功能

1 个答案: