Question

我有一个目标网页，它会显示一个菜单div和一个主div。此页面有两种状态

constructor(props) {
   super(props);
   this.state = {
        file: 'Main',
        menuFile: '',
   }
}

我挂载我的组件并设置menuFile状态

componentWillMount() {
   let test = 'menuMain';
   this.setState({
       menuFile: test
    });
}

我通过从这个页面调用它们来渲染菜单和主要部分

return (
 <div>
   <div className="menu">
     <Menu handleFileChange={this.handleFileChange.bind(this)} menuFile={this.state.menuFile} handleMenuChange={this.handleMenuChange.bind(this)} />
   </div>
   <div className="fileDiv">
      <File name={this.state.file} />
   </div>
 </div>

程序加载时，所有这些都可以正常工作。问题是，当我点击一个新菜单时，调用handleMenuChange（），但没有任何反应。

handleMenuChange() {
  this.setState( {menuFile} );
}

ex. 
 menuFile = menuMain when the program starts.
 The program loads menuMain find.  When I click on a new menu, menuFile becomes the new menu name let's say...
 menuFile = menuOptions
 If I console log menuFile it reads 'menuOptions', but the menuOptions menu isn't rendered to screen.  
 If I start the program with menuFile = menuOptions - -  then menuOptions is rendered out.  However, if I click on a menu button, the state is updated but the new menu isn't rendered out.

状态更新到menuFile我希望将菜单更改为，但菜单保留为默认菜单。无论出于何种原因，它都不会调用新状态并重新呈现新菜单。

如何查看状态更新以确保重新呈现页面？

我认为它与shouldComponentUpdate（）有关 - 但我对如何使用它感到困惑。

Answer 1

我可以看到，menuFile不是您的Menu容器的道具。你应该试试这个

handleMenuChange() {
   this.setState( {menuName: 'newName'} );
}

菜单取决于menuName，因为我看到了

Answer 2

你应该更新功能：

handleMenuChange() { this.setState( {menuFile} ); }

到

handleMenuChange(menuFile) { this.setState( {menuFile} ); }

如何使用React更新我的组件状态？

2 个答案: