ReactJS：backend.js：6警告：在现有状态转换期间（例如在`render`中）无法更新

Question

我有一个日期选择器，该日期选择器是根据用户要进行的更改类型（“未来”或“永久”）而有条件地呈现的：

第一次显示日期选择器时，我看到以下警告：

backend.js：6警告：无法在现有状态转换过程中（例如在render中进行更新）。渲染方法应该纯粹是props和state的函数。  匿名（由DatePicker创建）

I’m not sure why this is happening but I tried to change the logic to the following but that has not worked either:

    const [startDate, setStartDate] = useState(props.input.value);
        const ref = React.createRef();
        const onChange = useCallback(date => setStartDate(date), []);
        return (
            <DatePicker
                selected={startDate}
                onChange={() => onChange}

这是我的日期选择器：

const ButtonImage = ({onClick}) => (
    <div onClick={onClick} className="button-container">
        <img src="https://mcontent/static_assets/Media/icon-calendar.svg" />
    </div>
);
ButtonImage.propTypes = {
    onClick: PropTypes.func
};
const CustomInput = React.forwardRef((props, refs) => {
    const inputProps = props.inputProps;
    inputProps.input.onChange(props.value);
    return (
        <div className="input-button">
            <FormattedTextInput
                {...inputProps}
                ref={refs}
                onFocus={props.onFocus}
                onChange={props.onChange}
                helpText={<span aria-hidden="true">YYYY-MM-DD | HH:MM</span>}
            />
        </div>
    );
});
CustomInput.propTypes = {
    inputProps: PropTypes.object,
    onChange: PropTypes.func,
    onFocus: PropTypes.func,
    value: PropTypes.string
};
const DateTimePicker = props => {
    const [startDate, setStartDate] = useState(null);
    const ref = React.createRef();
    useEffect(() => {
        if (props.input.value === '') {
            setStartDate(null);
        }
    }, [props.input.value]);
    return (
        <DatePicker
            selected={startDate}
            onChange={date => setStartDate(date)}
            minDate={moment()}
            customInput={<CustomInput inputProps={props} ref={ref} />}
            showTimeSelect
            disabledKeyboardNavigation
            timeFormat="HH:mm"
            timeIntervals={15}
            timeCaption="time"
            dateFormat="YYYY-MM-DD HH:mm"
        />
    );
};
DateTimePicker.propTypes = {
    input: PropTypes.object
};

这就是我所说的日期选择器：

    {this.props.searchPageFormData && this.props.searchPageFormData.type === 'F' && (
                                <FormSection className="page-subheader" label="Date">
                                    <FormGroup>
                                        <Field
                                            className="input"
                                            component={DateTimePicker}
                                            label="Future Date"
                                            name="futureDate"
                                            validate={[required, validDateTimeFormat]}
                                            formatting="9999-99-99 99:99"
                                        />
                                    </FormGroup>
                                </FormSection>
                            )}