reactjs - 不工作 2 DateRangePicker (react-dates) 在 1 页

Question

我需要在 1 页上发布 2 DateRangePicker，但我的代码不起作用。startDate 和 endDate 变量之间可能存在一些冲突。尽管我使用了其他变量，但错误并没有消失。请帮助解决问题..这是我的代码：

    constructor(props) {
        super(props);
        moment.locale('ru');
        this.state = {
            startDate: null,
            endDate: null,
            startDate2: null,
            endDate2: null,
            focusedInput: null,
            focusedInput2: null,
        };
    }


    render() {
        return (
            <div>
                <DateRangePicker
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onDatesChange={({startDate, endDate}) => this.setState({
                        startDate,
                        endDate
                    })}
                    focusedInput={this.state.focusedInput}
                    onFocusChange={(focusedInput) => this.setState({focusedInput})}
                    readOnly={true}
                    hideKeyboardShortcutsPanel={true}
                    showClearDates={true}
                    startDateId="startDate"
                    endDateId="endDate"
                    isOutsideRange={() => false}
                />
                <DateRangePicker
                    startDate={this.state.startDate2}
                    endDate={this.state.endDate2}
                    onDatesChange={({startDate2, endDate2}) => this.setState({
                        startDate2,
                        endDate2
                    })}
                    focusedInput={this.state.focusedInput2}
                    onFocusChange={(focusedInput2) => this.setState({focusedInput2})}
                    readOnly={true}
                    hideKeyboardShortcutsPanel={true}
                    showClearDates={true}
                    startDateId="startDate2"
                    endDateId="endDate2"
                    isOutsideRange={() => false}
                />
            </div>

        );
    }
}

Answer 1

      <DateRangePicker
      startDate={this.state.startDate}
      endDate={this.state.endDate}
      onDatesChange={({startDate,endDate}) =>
        this.setState({
          startDate:startDate,
          endDate:endDate
        })
      }
      focusedInput={this.state.focusedInput}
      onFocusChange={focusedInput => this.setState({ focusedInput })}
      readOnly={true}
      hideKeyboardShortcutsPanel={true}
      showClearDates={true}
      startDateId="startDate"
      endDateId="endDate"
      isOutsideRange={() => false}
    /> 
    <DateRangePicker
      startDate={this.state.startDate2}
      endDate={this.state.endDate2}
      onDatesChange={({startDate,endDate}) =>
      this.setState({
          startDate2:startDate,
          endDate2:endDate
        })
      }
      focusedInput={this.state.focusedInput2}
      onFocusChange={focusedInput2 => this.setState({ focusedInput2 })}
      readOnly={true}
      hideKeyboardShortcutsPanel={true}
      showClearDates={true}
      startDateId="startDate2"
      endDateId="endDate2"
      isOutsideRange={() => false}
    />

**问题在于破坏包发送的日期obj，这是一个工作沙箱https://codesandbox.io/embed/magical-darkness-jh8kk?fontsize=14&hidenavigation=1&theme=dark