渲染父组件后如何重置反应本机滑块（子组件）？

Question

我对 React/React-Native 还是很陌生。我正在构建一个小应用程序，它使用来自 API 服务器的数据来呈现热图。我有一个日期选择器，可以过滤我获取的数据集，从而控制渲染的热图。在我获取并渲染热图之后，用户可以在数据集上滑动并查看相应的结果。所以滑块的最大值和平均值由日期选择器决定。每次日期选择器选择一个新日期时，我都会设置状态，并使用新状态渲染 HeatMap 组件（这是包含滑块组件的父组件）。渲染后，我希望 Slider 移动起始位置（值 = 0）。但是，滑块似乎与先前状态处于相同位置。我怎样才能达到预期的行为。

这是我的父组件，其中包括日期选择器和滑块组件。

   class Home extends Component {
      constructor(props) {
        let start_date = new Date();
        start_date.setDate(1);
        start_date.setMonth(0);
        start_date.setFullYear(2019);
        let date = getLastBusinessDay(start_date);
        super(props);
        this.state = {
          date: date,
          data: false,
          slider: getGermanFormatDate(date)
        };
      }

  componentWillMount() {
    this.getHeatData();
  }

  getHeatData = () => {
    axios
      .get(heat_data_url, {
        params: {
          date: getGermanFormatDate(this.state.date)
        }
      })
      .then(response => this.setState({ data: response.data }));
  };

  setDate = date => {
    this.setState({ date: date }, this.getHeatData);
    this.setState({ slider: getGermanFormatDate(date) });
  };

  onSlideCallBack = value => {
    this.setState({ slider: value });
    this.setState({ date: makeDateFromString(value) });
  };

  render() {
    if (!this.state.data) {
      return (
        <View style={styles.activityIndicator}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      );
    } else {
      return (
        <View style={styles.main}>
          {/* // Header Menu bar */}
          <View>
            <HeaderComponent
              navigation={this.props.navigation}
              title="Global Risk Alert"
            />
          </View>
          {/* // Headr Menu bar ends */}

          {/* // Main Content section */}
          <View style={styles.content}>
            {/* // Header content */}
            <View
              style={{
                flex: 0,
                height: 50
              }}
            >
              <Text style={styles.headerText}>Global Risk Dynamic</Text>
            </View>
            {/* // Header content ends */}

            {/* Heatmap section */}
            <Heatmap heat_data={this.state.data} date={this.state.date} />
            {/* Heatmap section ends */}
            <View>
              <Text style={styles.headerText}>{this.state.slider}</Text>
            </View>
            {/* Slider section */}
            <DateSlider
              callBack={this.onSlideCallBack}
              data={this.state.data}
            />
            {/* Slider section  ends */}

            {/* DatePicker section */}
            <PickDate
              callBack={this.setDate}
              slider_date={this.state.slider}
              navigation={this.props.navigation}
              data={this.state.data}
            />
            {/* DatePicker section  ends */}
          </View>
          {/* // Main Content section ends */}

          <View>
            <SocialMedia />
          </View>
        </View>
      );
    }
  }
}

这是我的 Slider 组件

const DateSlider = props => {
    const runCallBack = value => {
    let dates = Object.keys(props.data);
    dates = dates.map(_getDate);

    // dates are of the format ["22.7.2019", "23.7.2019"]
    dates.sort((a, b) => a - b);
    dates = dates.map(getGermanFormatDate);
    props.callBack(dates[value]);
  };
   const _getDate = date_string => {
   // date_string is of the format 22.7.2019
    let date = new Date();
    date.setDate(date_string.split(".")[0]);
    date.setMonth(date_string.split(".")[1] - 1);
    date.setFullYear(date_string.split(".")[2]);
    return date;
  };

  if (getDataLength(props.data) <= 1) {
    return <View />;
  }
  return (
     <View style={styles.container}>
       <Slider
         value={0}
         onValueChange={runCallBack}
         minimumValue={0}
         maximumValue={getDataLength(props.data)}
         step={1}
       />
      </View>
   );
 };

UPDTE：何时应将滑块带回起始端（重置）：每当我从日期选择器中选择一个新日期时。日期选择器事件调用“setDate”方法（在父组件中），该方法设置“日期”状态并调用“getHeatData”方法。 Get heatData 获取数据并设置“数据”状态。 “数据”状态指示滑块的“最大值”。所以基本上我想在选择新日期时重置（将滑块指针返回到起始端）滑块。

Answer 1

如果您希望滑块值在特定操作时重置，一种可能的解决方案是从父组件控制其值。

您已经在父母的状态中存储了这个值，因此您可以将其传递给孩子：

<DateSlider
  callBack={this.onSlideCallBack}
  data={this.state.data}
  sliderValue={this.state.slider}
/>

然后在您的子组件中，您将这个值用于滑块：

<Slider
  value={this.props.sliderValue}
  onValueChange={runCallBack}
  minimumValue={0}
  maximumValue={getDataLength(props.data)}
  step={1}
/>

现在您可以随时更新父级中的slider，它会重新渲染滑块。实际上，您已经在 setDate 中执行此操作，因此滑块将在日期选择时重新呈现。