Question

TLDR;
将className添加到令人兴奋的div会不会在 ReactJs 中重新加载父组件？在按钮附近添加了图像，以显示console.log被多次调用。

这是错误。.

我正在构建一个简单的“订单”应用，其中包括一个侧边栏。

我在一个新项目中重新创建了侧边栏以进行完整性检查。同样的问题。这是简单的版本。

class App extends Component {
  constructor() {
    super();
    this.state = {
      addList : [],
    }
  }
  render() {
    return (
      <div className="App">
        <Sidebar list = {this.state.addList}/>
      </div>
    );
  }
}

export default App;

和侧边栏组件中

class Sidebar extends Component {
    constructor(props){
        super(props);
        this.state = {
            active : false
        }
    }
    toggleSidebar () {
        if (this.state.active) {
            this.setState({
                active : false
            })
        } else {
            this.setState({
                active: true
            })
        }
    }
    render () {
        return (
            <div className={ 'sidebar ' + ((this.state.active) ? '' : 'hidden')}>
                <button className='tab' onClick={(e)=>{this.toggleSidebar()}}>
                        TAB
                </button>
                <div className="itemList">
                    {console.log(this.props.list)}
                </div>
            </div>
        )
    }
}

export default Sidebar;

sideBar类有一个position: fixed，单击按钮并添加一个hidden className（.hidden { right: -x }），我将其移出屏幕

在父级应用程序组件中选择某项后，该项就会添加到其状态（addItem）。

补充工具栏组件具有该属性，因此，当addItem获得新项目时，它将显示它。它按预期运行。我能够添加项目并显示它们没有问题。

当我开始添加数字并进行价格总计等时，我注意到了该错误，因为似乎边栏一直在渲染，我会发现自己陷入了无限setState循环

有什么解决方案或建议吗？

可视图像（单击选项卡和控制台显示）：

Answer 1

答案很简单，我很愚蠢。实际上，我正在更改侧边栏的状态会导致重新加载。

为此，要解决此问题，是使父组件保留这些值并将其作为下边栏的属性向下传递以供显示。因此，在重新加载时，值不会更改或重新添加。

在className更改时ReactJS组件意外重新加载

1 个答案: