反应弹簧视差无法使用状态映射函数声明偏移

Question

im 试图创建一个使用 React-Spring 视差的 react 页面。我使用 web api 作为数据，所以当我使用视差标签时，我试图设置偏移量和滚动到函数的值。正如你在下面看到的;

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

所以这些是我的解码和 Web 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> }

因此，在此代码的一部分中，我正在映射列表以创建足够数量的视差层。但是我无法管理偏移量和this.parallax.scroll((的值。这些家伙采用整数值来相互导航。

我尝试了i和i+1交易，但它变得很奇怪。第一个视差效果很好，它可以导航第二页，但在第一页之后，每一页都会将我导航到最后一页。我在堆栈溢出中找不到相关问题，所以我需要这方面的帮助。感谢您的回答，对不起我的英语。

Answer 1

在调查堆栈闪电战之后，我发现问题确实是"i"值立即增加到列表的长度，所以无论你点击哪里，除了第一个，你都会转到最后一页。

我在地图迭代中添加了一个 listIndex 值，并将其递增到那里。您可以按照控制台.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>
}

如果我能帮上其他忙，请告诉我。