Question

我有一个Carousel组件，它根据作为道具传递到该组件的索引来渲染不同的图像。该索引当前正在通过将调用setState（在父组件中声明）的函数传递到轮播箭头的onClick道具中进行更新。

一切在桌面上都可以正常工作（即，单击箭头即可更改图像），但是重新渲染不会在移动设备上发生。

以下是我传递给onClick道具的功能：

  slideNext = () => {
    this.setState((prevState) => {
      const nextIndex = prevState.index + 1;
      return {
        index: (nextIndex === projects.length ? 0 : nextIndex)
      }
    });
  }

  slideBack = () => {
    this.setState((prevState) => {
      const prevIndex = prevState.index - 1;
      return {
        index: (prevIndex <= 0 ? (projects.length - 1) : prevIndex)
      }
    });
  }

我调试了它，控制台告诉我正在调用函数slideNext和slideBack以及其中的setState。

我只是不确定为什么setState重新提供桌面版而不是移动版中的组件？

Answer 1

对于projects，我已经填写了一些空白，以作为一个可行的例子。如果此示例没有重现您的问题，那么也许您可以调整我的示例以帮助我重现您的问题。同时：这是一种使用类似于您的代码的东西，并且可以在移动设备上很好地呈现。

偶然地，我注意到您转到上一个索引的逻辑是错误的（当您应该写<= 0时使用< 0）

class Foo extends React.Component {

  constructor() {
     super();
     this.state = {
       projects: ['first', 'second', 'third'],
       index: 0
     };
  }
  
  render() {
    var slideNext = () => {
      this.setState((prevState) => {
        const nextIndex = prevState.index + 1;
        return {
          index: (nextIndex === prevState.projects.length ? 0 : nextIndex)
        }
      });
    }

    var slideBack = () => {
      this.setState((prevState) => {
        const prevIndex = prevState.index - 1;
        return {
          index: (prevIndex < 0 ? (prevState.projects.length - 1) : prevIndex)
        }
      });
    }  
    
    return (
      <div>
        <button onClick={slideBack}>Back</button>
        <button onClick={slideNext}>Next</button>
        <p>
          Index: <span>{this.state.index}</span>
        </p>
        <p>
          Project: <span>{this.state.projects[this.state.index]}</span>
        </p>
      </div>
    );
  }
  
}

// Render
ReactDOM.render(
  <Foo />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

React setState不只在移动设备上重新呈现吗？

1 个答案: