Javascript 在React中设置特定组件的状态

我在一个页面上呈现了许多相同的组件，如果用户需要，可以添加更多相同的子组件。当他们在子组件的form元素中选择日期时，我只想更改他们选择的子组件的日期。现在它改变了屏幕上所有子组件的日期，有人能看到我哪里出错了吗

class ParentFixturesComponent extends Component {

    constructor() {
        super();
        this.state = {
            numChildren: 0,
            startDate: moment(),
            id: uuid()
        };
    }

    changeDate(newDate) {
        this.setState({
            startDate: newDate
        });
    }

    onAddMatch() {
        this.setState({
            numChildren: this.state.numChildren + 1
        });
    }

    render() {
        const children = [];
        for (let i = 0; i < this.state.numChildren; i += 1) {
            children.push(<SingleMatchForm startDate={this.state.startDate}
                                           key={this.state.id}
                                           changeDate={this.changeDate.bind(this)}
            />)
        }

        return (
            <Fixtures addMatch={this.onAddMatch.bind(this)}>
                {children}
            </Fixtures>
        );
    }

}

export default ParentFixturesComponent;

类ParentFixturesComponent扩展组件{
构造函数（）{
超级（）；
此.state={
儿童：0，
起始日期：力矩（），
id:uuid（）
};
}
变更日期（newDate）{
这是我的国家({
起始日期：newDate
});
}
onAddMatch（）{
这是我的国家({
numChildren:this.state.numChildren+1
});
}
render（）{
const children=[]；
for（设i=0；i

子组件

class SingleMatchForm extends Component {

    handleChange(params) {
        this.props.changeDate(params);
    }

    render() {
        return (
            <div className="row">
                <div key={this.props.id} className="form-group">
                    <label className="control-label col-md-2">New Match</label>
                    <div className="col-md-6">
                        <DatePicker
                            selected={this.props.startDate}
                            onChange={this.handleChange.bind(this)}/>
                        <div className="section-divider mb40" id="spy1"> </div>
                    </div>
                </div>
            </div>
        );
    }

}

export default SingleMatchForm;

类SingleMatchForm扩展组件{
handleChange（参数）{
此.props.changeDate（参数）；
}
render（）{
返回(
新对手
);
}
}
导出默认的SingleMatchForm；

原因是，您正在使用单个

状态

变量保存所有子组件的日期值，如果您更新该单个

状态

值，它将影响所有组件。要解决此问题，请使用

数组

而不是单个值

像这样：

this.state = {
    numChildren: 0,
    startDate: [],  //array
    id: uuid()
};

现在，为每个子组件使用此

数组的每个值，并在onChange方法中绑定索引以更新特定值，如下所示：

children.push(<SingleMatchForm startDate={this.state.startDate[i] || moment()}
                                           key={this.state.id}
                                           changeDate={this.changeDate.bind(this, i)}
            />)

我只想更改他们选择的子组件的日期

然后子组件应该将日期作为其状态，或者让父组件将日期保存在所有子组件的数组中。
很高兴，它帮助了你：）@MayankShukla你能帮我一下吗：@TriyugiNarayanMani抱歉，我对redux没有太多的了解：（@MayankShukla好的……没问题
changeDate(i, newDate) {
    let startDate = this.state.startDate.slice();
    startDate[i] = newDate;
    this.setState({
        startDate
    });
}