React-Spring Parallax 不能用状态映射函数声明偏移量

Question

我正在尝试使用 web api 为数据创建一个带有 react-spring 的 parallax.Im 的反应页面，所以当我使用视差标签时，我正在尝试设置偏移量和 scrollTo 函数value.As您可以在下面看到；

class HomeComponent extends Component {
constructor(props) {
    super(props);
    this.state = {
        list: [],
        categoryCount: '',
    }

}
   componentDidMount() {
    axios.get(`http://localhost:9091/api/category`)
        .then(res => {
            this.setState({ list: res.data, categoryCount: res.data.length })
        });
}

这些是我的声明和网络 api 调用部分，下一部分是 render();

render() { let i = 1 return <Parallax pages={this.state.categoryCount + 1} scrolling={true} vertical ref={ref => (this.parallax = ref)}> <ParallaxLayer key={0} offset={0} speed={0.5}> <span onClick={() => this.parallax.scrollTo(1)}>MAINPAGE</span> </ParallaxLayer> {this.state.liste.map((category) => { return ( <ParallaxLayer key={category.categoryId} offset={i} speed={0.5}> <span onClick={() => { this.parallax.scrollTo(i + 1) }}>{category.categoryName}</span> {i += 1} {console.log(i)} </ParallaxLayer> ); })} </Parallax> }

所以在这段代码的一部分中，我正在映射列表以创建足够的视差 layer.But 我无法管理 offset 和 this.parallax.scroll() 的 values.These 人使用整数值相互导航。

我尝试了 i 和 i+1 交易，但它得到 weird.First 视差效果很好，它导航到第二页但在第一页之后，每一页都会将我导航到最后一页 page.I 在 Whosebug 中找不到相关问题，所以我需要这方面的帮助 one.Thanks 以获得答案，对不起我的英语。

Answer 1

在调查了 stackblitz 之后，我发现问题确实是 "i" 值立即增加到列表的长度，所以除了第一个之外，无论你点击什么，你都会去到最后一个页。

我在地图迭代中添加了一个 listIndex 值，并在那里递增了它。您可以按照 console.log 语句以及屏幕上打印的内容进行操作。

这是一个有效的解决方案，但我非常确定有更优雅的方法来解决这个问题（将其移入函数等）。

render() {
    let i = 1;
    return <Parallax pages={this.state.liste.length + 1} scrolling={true} vertical ref={ref => (this.parallax = ref)}>
        <ParallaxLayer key={0} offset={0} speed={0.5}>
            <span onClick={() => this.parallax.scrollTo(1)}>MAINPAGE</span>
        </ParallaxLayer>
        {this.state.liste.map((category, listIndex) => {
            return (
                <ParallaxLayer key={category.categoryId} offset={listIndex + 1} speed={0.5}>
                    <span onClick={() => { this.parallax.scrollTo(listIndex + 1) }}>{category.categoryName} - test</span>
                    {listIndex += 1}
                    {console.log(listIndex)}
                </ParallaxLayer>
            );
        })}
    </Parallax>
}

如果我能帮上什么忙，请告诉我。

React-Spring Parallax 不能用状态映射函数声明偏移量

React-Spring Parallax Can't Declare Offset With State Mapping Function

javascript

reactjs

parallax

react-spring