希望 setState 可以加一个强制更新的功能

[bdoycn]

希望能加一个选项强制更新 setState
因为有的时候 setState 的值就和当前 state 的值一致
比如: scrollIntoView 的 id、scrollTop、focus等

ps: 虽然可以加一些代码兼容 但是太冗余了 最好还是加这样一个功能吧

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[luckyadam]

有 this.forceUpdate 供君选用

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[bdoycn]

有this.forceUpdate供君选用

这个我试了下 貌似还是不符合我的要求
例如 scrollIntoView 的属性
this.state.scrollId = 'first'; this.forceUpdate();
这样的话 只有第一次触发 scroll 的滚动

如果用原生的 this.setData({ scrollId: 'first' }) 无论哪次都会触发滚动

[Chen-jj]

@bdoycn 被 diff 过滤了，我们再考虑一下 scrollView 这种需求

[imageslr]

这个我也有同样的需求，希望能够关注一下

[imageslr]

@bdoycn 我的解决办法是这样的：在setState的回调中重置 scrollIntoView变量值，保证下次调用setState时一定会重新渲染该ScrollView组件：

// 事件代码
this.setState({ scrollIntoView: "seller-list-title" }, () => {
  this.setState({ scrollIntoView: "" });
});

// 组件
<ScrollView
    scrollY
    style={{ height: "100vh" }}
    scrollIntoView={scrollIntoView}
>

[imageslr]

@bdoycn 请问你是怎么增加代码兼容的呢？

[bdoycn]

@bdoycn 请问你是怎么增加代码兼容的呢？

我目前是加了一个占位符在要跳转的ID上面，然后两个值交互替换，但是这个只适用于单个固定值
如果多个值，也只能置空后再跳了

[imageslr]

谢谢

[Chen-jj]

@bdoycn @imageslr 我们讨论后觉得 diff 还是必要的，而为了 ScrollView 单独出一个不做 diff 的 setState API 会令开发者疑惑，也不太合理。

因此建议 scrollIntoView 的 id 可以成功设置后置为空，而 scrollTop 可以在滚动事件时设置为当前滚动高度。

import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'

export default class Detail extends Component {
  state = {
    top: 0,
    target: ''
  }

  onClick = () => {
    this.setState({
      top: 0
    })
  }

  onScroll (e) {
    if (this.timer) clearTimeout(this.timer)
    this.timer = setTimeout(() => {
      this.setState({
        top: e.detail.scrollTop
      })
    }, 100);
  }

  scrollTo = (target) => {
    this.setState({
      target
    }, () => {
      this.setState({
        target: ''
      })
    })
  }

  render() {
    return (
      <View>
        <ScrollView
          className='scrollview'
          scrollY
          scrollWithAnimation
          scrollTop={this.state.top}
          scrollIntoView={this.state.target}
          style='height: 600px;'
          onScroll={this.onScroll}
        >
          <View id='A' style='height:600px;background-color:rgb(26,173,25);'>A</View>
          <View id='B' style='height:600px;background-color:rgb(39,130,215);'>B</View>
          <View id='C' style='height:600px;background-color:rgb(241,241,241);color: #333;'>C</View>
        </ScrollView>
        <View onClick={this.onClick}>back2top: {this.state.top}</View>
        <View onClick={this.scrollTo.bind(this, 'A')}>scroll to A</View>
        <View onClick={this.scrollTo.bind(this, 'B')}>scroll to B</View>
        <View onClick={this.scrollTo.bind(this, 'C')}>scroll to C</View>
      </View>
    )
  }
}

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[imageslr]

O(∩_∩)O谢谢

[Solyna]

@Chen-jj 上面提供的方法，在3.5.11版本没生效，点击没有滚动到对应位置，帮忙排查下？

[Solyna]

@Chen-jj react版本是18.2.0