Question

我有一个简单的反应应用程序，包含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>
    )
  }
}

Answer 1

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

查看更多here。

从sideBar菜单更新react组件

1 个答案: