javascript - 渲染父组件后如何重置 native slider (子组件)？

Question

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

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

   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>
   );
 };

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

Answer 1

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

您已经在父级状态中拥有此值存储，因此您可以将其传递给子级:

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

然后在您的子组件中，使用该值作为 slider :

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

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