Question

我一直在React做侧边栏，我希望能够切换内容。

如果我从屏幕中选择一个项目，我希望侧边栏更新其信息，我通过在sidebar.js类中设置回调来完成此操作。之后我想为侧边栏设置正确的内容。

我解决了这个问题，方法是让sidebar.js在其状态下保存不同的内容状态并更新索引，并将项目设置为状态。

我的问题是我想访问其中一个内容状态的项目，但它似乎没有更新。

我遇到的问题是，即使在setState（{activeItem：item}）之后，contentX中的prop项仍为null！

我已尝试在setState上设置回调，首先更新项目然后设置内容但无效。

任何人都有线索？

class Sidebar extends React.Component{
  constructor(props){
    super(props)
    var placeHolder = <b> placeholder </b>;
    this.state = {activeItem: "I want to update this", activeContent: [placeHolder], activeIndex: 0}
  
    var content1 = <Content1 item={this.state.activeItem}> </Content1>
    this.contentBox = [content1]
  }
  
  render(){
  const { activeIndex, activeContent } = this.state
    return(
      <div>
        {activeContent[activeIndex]}

        <button onClick={() => this.setState({
          activeContent: [this.contentBox],
          activeIndex: 0, 
          activeItem: "hello"})}> 
        </button>
      </div>
    )
  }
}


class Content1 extends React.Component{  
  render(){
    return(
       <b> {this.props.item} </b>
    )
  }
}


ReactDOM.render(
  <Sidebar />,
  document.getElementById("react")
);

<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>

<div id="react"></div>

Answer 1

状态应仅用于存储将在组件中使用的值。但是，不应该生成组件并将它们存储在状态中。

在下面的代码中，状态actievContent设置为具有旧item值的组件。假设您的状态activeItem的值为hello1，在下面的代码中，您的Content将使用值hello1进行格式化，并存储在activeContent而不是hello中您可能期望的{1}}。因此，您的Content1无法获得您正在设置的新州值，在这种情况下为hello。

<button onClick={() => this.setState({
  activeContent: [<Content1 item={this.state.activeItem} />],
  activeIndex: 0, 
  activeItem: "hello"})}> 
</button>

相反，你必须做这样的事情。

<button onClick={() => this.setState({
  activeIndex: 0,
  activeItem: "hello"})}> 
</button>

然后在render方法中，您必须使用正确的值调用组件。而不是activeContent，放置组件并将正确的道具传递给它。

render(){
 return(
  <div>
    <Content1 item={this.state.activeItem} />
    <button onClick={() => this.setState({
      activeIndex: 0, 
      activeItem: "hello"})}> 
    </button>
  </div>)
}

在变量声明的jsx上设置状态

1 个答案: