父组件中的setState之后子组件未重新呈现

Question

我有2个组成部分。在GeneralOptions中，我得到了一些输入字段，这些字段需要根据它们的值进行同步。这些值存储在parent state中，因为以后需要它们。

父项：

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.calculateSliders = this.calculateSliders.bind(this);
        this.state = {
            interval: 10,
            recordingTime: 6000,
            movieTime: 12
        };
    }

    calculateSliders(disabled, type, value) {
        var dynamicValue;
        console.log(disabled + type + value)

        if (disabled === 'interval' && type === 'recordingTime') {
            dynamicValue = (value / this.state.interval) / 25
            this.setState({
                recordingTime: value
            })
            this.setState({
                movieTime: dynamicValue
            })
        } else if (disabled === 'interval' && type === 'movieTime') {
            dynamicValue = (value * 25) * this.state.interval;
            this.setState({
                movieTime: value
            })
            this.setState({
                recordingTime: dynamicValue
            })
        } else if (disabled === 'recordingTime' && type === 'interval') {
            dynamicValue = (this.state.recordingTime / value) / 25;
            this.setState({
                interval: value
            })
            this.setState({
                movieTime: dynamicValue
            })
        } else if (disabled === 'recordingTime' && type === 'movieTime') {
            dynamicValue = this.state.recordingTime / (value * 25);
            this.setState({
                movieTime: value
            })
            this.setState({
                interval: dynamicValue
            })
        } else if (disabled === 'movieTime' && type === 'interval') {
            dynamicValue = this.state.movieTime * value * 25;
            this.setState({
                interval: value
            })
            this.setState({
                recordingTime: dynamicValue
            })
        } else if (disabled === 'movieTime' && type === 'recordingTime') {
            dynamicValue = value / (this.state.movieTime * 25)
            this.setState({
                recordingTime: value
            })
            this.setState({
                interval: dynamicValue
            })
        }
    }
 }

    render() {
        return (<div >
             {

        <GeneralOptions 
           interval={this.state.interval} 
           recordingTime={this.state.recordingTime}
           movieTime={this.state.movieTime}
           calculateSliders={this.calculateSliders}
        />  
        </div>
        );
    }
}

export default Parent;

子组件：

class GeneralOptions extends React.Component {
  constructor(props) {
    super(props);
    this.handleIntervalChange = this.handleIntervalChange.bind(this);
    this.handleRecordingTimeChange = this.handleRecordingTimeChange.bind(this);
    this.handleMovieTimeChange = this.handleMovieTimeChange.bind(this);
    this.handleDisableChange = this.handleDisableChange.bind(this);
    this.state = {
      disabled: 'interval'
    };
  }

  handleIntervalChange(event) {
    this.props.calculateSliders(this.state.disabled, 'interval', event.target.value);
  }

  handleRecordingTimeChange(value) {
    var seconds = this.toSeconds(value);
    this.props.calculateSliders(this.state.disabled, 'recordingTime', seconds);
  }

  handleMovieTimeChange(value) {
    var seconds = this.toSeconds(value);
    this.props.calculateSliders(this.state.disabled, 'movieTime', seconds);
  }

  toDateTime(secs) {
    console.log("lklkl");
    var t = new Date(1970, 0, 1); // Epoch
    t.setSeconds(secs);
    return t;
  }

  toSeconds(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();

    var totalSeconds = (hours * 3600) + (minutes * 60) + seconds;
    return totalSeconds;
  }

  createIntervalOptions = () => {
    let interval = []

    for (let i = 1; i <= 120; i++) {
      interval.push(<option key={i.toString()} value={i}>{i}</option>)
    }
    return interval
  }

  handleDisableChange(event){
    this.setState({disabled: event.target.value})
  }


  render() {
    return (
      <div>
        <Grid container spacing={1}>
        <Grid item xs={8}>
            <div>
              <FormControl >
                <InputLabel htmlFor="age-native-simple">Interval</InputLabel>
                <Select
                  native
                  disabled={this.state.disabled === 'interval'}
                  value={this.props.interval}
                  onChange={this.handleIntervalChange}
                  inputProps={{
                    name: 'Interval',
                    id: 'age-native-simple',
                  }}
                >
                  {this.createIntervalOptions()}
                </Select>
              </FormControl>
            </div>
            <div>
              <SecondsTimePicker disabled={this.state.disabled === 'recordingTime'} label="Recording Time" value={this.toDateTime(this.props.recordingTime)} onChange={this.handleRecordingTimeChange} />
            </div>
            <div>
              <SecondsTimePicker disabled={this.state.disabled === 'movieTime'} label="Movie Time" value={this.toDateTime(this.props.movieTime)} onChange={this.handleMovieTimeChange} />
            </div>
          </Grid>
          <Grid item xs={4}>
            <FormControl component="fieldset">
              <FormLabel component="legend">Lock</FormLabel>
              <RadioGroup
                aria-label="Lock"
                name="lock"

                value={'interval'}
                onChange={this.handleDisableChange}
              >
                <FormControlLabel checked={this.state.disabled === 'interval'} value="interval" control={<Radio />} labelPlacement="top" />
                <FormControlLabel checked={this.state.disabled === 'recordingTime'} value="recordingTime" control={<Radio />} labelPlacement="top" />
                <FormControlLabel checked={this.state.disabled === 'movieTime'} value="movieTime" control={<Radio />} labelPlacement="top" />
              </RadioGroup>
            </FormControl>
          </Grid>
        </Grid>
      </div>
    );
  }
}

export default GeneralOptions;

由于某些原因，在调试器中state parent发生了变化，但是child没有正确地重新呈现。 Select可以，但是SecondsTimePicker中的child不能。

对于任何帮助或建议，我将非常感谢！