Javascript 如何在渲染父组件后重置react本机滑块（子组件）？

我是个新手。我正在构建一个小应用程序，通过使用API服务器的数据来渲染热图。我有一个日期选择器，它过滤我获取的数据集，从而控制渲染的热图。在我获取并渲染热图之后，用户可以在数据集上滑动并查看相应的结果。因此，滑块的最大值和平均值由日期选择器指定。每次日期选择器选择新日期时，我都会设置状态，并使用新状态渲染热图组件（包括滑块组件的父组件）。渲染后，我希望滑块移动起始位置（值=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>
      );
    }
  }
}

class Home扩展组件{
建造师（道具）{
让开始日期=新日期（）；
开始日期。设置日期（1）；
开始日期设置月份（0）；
开始日期：整年（2019年）；
let date=getLastBusinessDay（开始日期）；
超级（道具）；
此.state={
日期:日期:，
数据：假，
滑块：getGermanFormatDate（日期）
};
}
组件willmount（）{
这是getHeatData（）；
}
getHeatData=（）=>{
axios
.get（加热数据地址）{
参数：{
日期：getGermanFormatDate（this.state.date）
}
})
.then（response=>this.setState（{data:response.data}））；
};
设置日期=日期=>{
this.setState（{date:date}，this.getHeatData）；
this.setState（{滑块：getGermanFormatDate（日期）}）；
};
onSlideCallBack=值=>{
this.setState（{slider:value}）；
this.setState（{date:makeDateFromString（value）}）；
};
render（）{
如果（！this.state.data）{
返回(
);
}否则{
返回(
{/*//标题菜单栏*/}
{/*//头菜单栏结束*/}
{/*//主要内容部分*/}
{/*//标题内容*/}
全球风险动态
{/*//标题内容结束*/}
{/*热图部分*/}
{/*热图部分结束*/}
{this.state.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>
   );
 };

const DateSlider=props=>{
const runCallBack=value=>{
让日期=Object.keys（props.data）；
dates=dates.map（_getDate）；
//日期的格式为[“2019年7月22日”、“2019年7月23日”]
排序（（a，b）=>a-b）；
dates=dates.map（getGermanFormatDate）；
道具回调（日期[值]）；
};
const\u getDate=date\u string=>{
//日期字符串的格式为2019年7月22日
让日期=新日期（）；
date.setDate（日期字符串拆分（“.”[0]）；
date.setMonth（日期字符串拆分（“.”[1]-1”）；
date.setFullYear（日期字符串拆分（“.”[2]）；
返回日期；
};
if（getDataLength（props.data）如果希望在特定操作上重置滑块值，一种可能的解决方案是从父组件控制其值

   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
，它将重新渲染滑块。实际上，您已经在
setDate
中执行了此操作，因此滑块将在日期拾取时重新渲染。
您正在将
date={this.slider}
传递给，但不应该是
date={this.state.slider}
？抱歉，我的错误。但这仍然不能解决问题。我没有在滑块组件中使用该属性。我已将其删除并更新了我的帖子。我对您希望滑块重置的情况感到困惑。当您在滑块的回调中设置触发热图重新渲染的状态时。是否希望它重置我不确定你基本上想要发生什么。@OlivierWilkinson我想从日期选择器中选择一个新的a日期。日期选择器事件调用setDate方法，该方法设置“日期”状态并调用getHeatData。Get heatData获取数据并设置“数据”状态。“数据”指示数据的“最大值”滑块的e。所以基本上我想在我选择新日期时重置滑块。它不起作用。我一定是在做傻事。无论如何，谢谢。感谢你的慷慨。你的意思是它不会重置？如果你设置了复制此部分，我可以查看它。