从sideBar菜单更新react组件

时间:2018-06-05 20:17:59

标签: reactjs setstate

我有一个简单的反应应用程序,包含3个组件: 1.包含链接的SideBar 2.包含表中数据的ItemList 3.包装它们的包装器(我从这里的一些帖子中了解到它有时很有用,因为我想在点击sideBar上的不同链接后更新ItemsList组件)。

我现在的工作:

在主要的Wrapper组件中:

  render() {
    return (
        <div>
            <SideMenu handleClick={this.handleClick} />
            <ItemsList url={this.state.currentUrl} />
        </div>
    );

}

应用程序启动后,使用ItemsList组件中的componentDidMount(),它会在那里获取数据并显示它。这很好。

问题是,当我单击sideMenu组件中的链接时,我正在更改主包装器状态下的currentUrl,因此它将被新url重新呈现:

  handleClick() {
    this.setState({ currentUrl: 'here I put the new address to fetch from'});
}

但获取的是位于前一个网址中的数据,而不是我刚刚更改过的网址。 基本上,在我调试并在我更改之后检查状态之后,currentUrl保持前一个,然后它使用前一个url重新呈现ItemList。

我的问题是,如何使用此handleClick()方法更改itemList的内容?希望我会得到一些见解。非常感谢,非常感谢您的帮助。

主包装代码:

class MainWrapper extends React.Component {
constructor() {
    super();
    this.state = {
        currentUrl: 'current url to fetch from...',
        data: []
    };
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    this.setState({ currentUrl: 'the new url ' });
}


render() {
    return (
        <div>
            <SideMenu handleClick={this.handleClick} />
            <ItemsList url={this.state.currentUrl} />
        </div>
    );

}

}

我的项目列表组件:

class ItemsList extends Component {

  constructor(props) {
    super(props);
    this.state = { url: props.url, data: [] };
  }

  componentDidMount() {
    return fetch(this.state.url)
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({ data: responseJson.data });
      })
  }

  render() {
    return (
      displaying the table html tags..

        }
      </div>
    )
  }
}

1 个答案:

答案 0 :(得分:0)

您可以在itemList组件中使用var folder = DriveApp.getFolderById('XXXXXXXXXXXXXXXX'); 生命周期方法。每次url更改时,listItem可能会根据我在您的问题中理解的内容重新呈现,因此componentDidUpdate方法将会触发。在这种方法中,您可以检查新网址并发出新请求。

查看更多here