为什么我得到不变违反：不变违反：最大更新深度超过。在setState上？

Question

我有这个组件：

// imports

export default class TabViewExample extends Component {
  state = {
    index: 0,
    routes: [
      { key: 'first', title: 'Drop-Off', selected: true },
      { key: 'second', title: 'Pick up', selected: false },
    ],
  };

  handleIndexChange = index => this.setState({ index });

  handleStateIndexChange = () => { // FUNCTION WITH THE ERROR
    const { index } = this.state;
    this.setState(({ routes }) => ({
      routes: routes.map((route, idx) => ({
        ...route,
        selected: idx === index,
      })),
    }));
  };

  renderTabBar = props => {
    const { routes } = this.state;
    this.handleStateIndexChange(); // HERE I GET THE ERROR
    return (
      <View style={tabViewStyles.tabBar}>
        {props.navigationState.routes.map((route, i) => {
          return (
            <>
              <TouchableOpacity
                key={route.key}
                style={[
                  tabViewStyles[`tabStyle_${i}`],
                ]}
                onPress={() => this.setState({ index: i })}
              >
                <Text>
                  {route.title}
                </Text>
                // THE FUNCTION ATTEMPTS TO SHOW AN ELEMENT WHEN
                // THE INDEX OF A ROUTE IS selected true
                {routes[i].selected && (
                  <View
                    style={{
                      flex: 1,
                    }}
                  >
                    <View
                      style={{
                        transform: [{ rotateZ: '45deg' }],
                      }}
                    />
                  </View>
                )}
              </TouchableOpacity>
            </>
          );
        })}
      </View>
    );
  };

  renderScene = SceneMap({
    first: this.props.FirstRoute,
    second: this.props.SecondRoute,
  });

  render() {
    return (
      <TabView
        navigationState={this.state}
        renderScene={this.renderScene}
        renderTabBar={this.renderTabBar}
        onIndexChange={this.handleIndexChange}
      />
    );
  }
}

完全错误：

不变量违规：不变量违规：超过最大更新深度。当组件在组件WillUpdate或组件DidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。

这是给出错误的函数：

  handleStateIndexChange = () => { // FUNCTION WITH THE ERROR
    const { index } = this.state;
    this.setState(({ routes }) => ({
      routes: routes.map((route, idx) => ({
        ...route,
        selected: idx === index,
      })),
    }));
  };

我只需要将selected的状态设置为true，这样我就可以切换组件的可见性。

Answer 1

在渲染中调用 setState 是无限重渲染循环的实际原因，因为设置状态调用重新渲染，这会调用另一个 setState，后者调用另一个重新渲染等。

所以我建议将setState部分移动到compentDidUpdate并在那里控制它。这是我的意思的近似值，只需稍加更改即可描述这一点。

class App extends React.Component {
  state = {
    index: 0,
    routes: [
      {
        key: "first",
        title: "Drop-Off",
        selected: true
      },
      {
        key: "second",
        title: "Pick up",
        selected: false
      }
    ]
  };

  componentDidUpdate(_, prevState) {
    if (prevState.index !== this.state.index) {
      this.handleStateIndexChange();
    }
  }

  handleIndexChange = () => {
    const randomIndexBetweenZeroAndOne = (Math.random() * 100) % 2 | 0;

    this.setState({
      index: randomIndexBetweenZeroAndOne
    });
  };

  getMappedRoutes = (routes, index) =>
    routes.map((route, idx) => ({
      ...route,
      selected: idx === index
    }));

  handleStateIndexChange = () => {
    this.setState(({ routes, index }) => ({
      routes: this.getMappedRoutes(routes, index)
    }));
  };

  render() {
    const { routes } = this.state;

    return (
      <>
        <button onClick={this.handleIndexChange}>Change Index</button>
        {this.state.routes.map(JSON.stringify)}
      </>
    );
  }
}

Answer 2

由于 React 会批量更新状态，如果你需要根据之前的状态设置状态，你应该在回调中完成所有的解构：

  handleStateIndexChange = () => {
    this.setState(({ index, routes }) => ({
      routes: routes.map((route, idx) => ({
        ...route,
        selected: idx === index,
      })),
    }));
  };

此外，正如@Adeel提到的，您不应该从< code>render执行上下文中调用< code>this.setState。请改用< code>componentDidUpdate调用。

Answer 3

如上面的注释中所述，不能直接在渲染函数中调用 setState。

我看不出有任何理由将所选值保留在您的状态中，因为它仅取决于其中已有的另一个值，此信息是多余的。

您应该从路由中的所有对象中删除选定内容，并更改 JSX 条件：

{routes[i].selected &&

到以下位置：

{i === this.state.index &&

产生相同的结果。

您现在可以从代码中删除handleStateIndexChange