Javascript 反应弹簧视差可以'；t使用状态映射函数声明偏移量

我试图用react-spring的视差创建一个react页面。我使用web api获取数据，所以当我使用视差标记时，我试图设置偏移量和scrollTo函数的值

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（）{
设i=1
返回（this.parallax=ref）}>
此.parallax.scrollTo（1）}>MAINPAGE
{this.state.liste.map（（category）=>{
返回(
{this.parallax.scrollTo（i+1）}>{category.categoryName}
{i+=1}
{console.log（i）}
);
})}
}

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

---

我尝试了I和I+1交易，但结果很奇怪。第一个视差很好，它可以导航到第二页，但在第一页之后，每一页都可以导航到最后一页。我在stackoverflow中找不到相关的问题，所以我需要这方面的帮助。谢谢你的回答，对不起，我的英语很好。

在调查stackblitz之后，我发现问题确实在于“I”值立即增加到列表的长度，因此，除了第一个之外，无论单击哪里，都会转到最后一页

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

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

render（）{
设i=1；
返回（this.parallax=ref）}>
此.parallax.scrollTo（1）}>MAINPAGE
{this.state.liste.map（（category，listIndex）=>{
返回(
{this.parallax.scrollTo（listIndex+1）}>{category.categoryName}-test
{listIndex+=1}
{console.log（listIndex）}
);
})}
}

---

如果我还可以帮忙，请告诉我。

我很好奇的一件事是componentDidMount中的第二个setState调用。“categoryCount”是否得到了您想要的值？由于异步的性质，我假设第二个setState应该在“then”中，这样它就可以在列表中填入“res.data”后确定列表的长度。另外，你所说的“I和I+1交易”到底是什么意思？是不是给每个“类别”（this.state.list.map（（category，index）=>{}）一个索引，然后用这个“索引”作为参数滚动到（this.parallax.scrollTo（index+1））？@saglamcem是的，关于“categoryCount”你是对的。我后来注意到了，但我忘了删除它。“I和I+1交易”正在设置偏移量行后的状态+1值，但这也不起作用，因为我想是异步的。增加偏移量应该不会有问题（异步的），除非您调用后端并期望得到结果。：）理论上（并查看api:）我希望i和i+1都能起作用。也许你可以玩一下这个工作项目，看看你可能做错了什么：@saglamcem嘿，我在条目中做了一个更改。你能再检查一下吗？再次感谢你的努力，我不知道我可以用第二个参数做映射迭代。但我必须问一下，偏移量值和scrollTo值似乎是相同的listIndex+1，但它工作得非常好。它怎么可能是：）

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