This answer quotes ChatGPT
This may be the case because your component is not updating the render view properly. When you get to the next level of data, you should store that data in your component state and render the next level of components as needed.
The following is a possible solution that you can modify to suit your specific situation:
Defines a state in your component to store data, for example:
state = {
data: null // 初始时无数据
}
After clicking the Expand button, use your data fetch logic to fetch the next level of data and then store it in the component state, for example:
handleExpand = async () => {
const nextLevelData = await fetchData() // 使用您的获取数据逻辑
this.setState({ data: nextLevelData })
}
Determines whether to render the next level of the component based on its state in your component rendering method, for example:
render() {
const { data } = this.state
return (
<div>
{data ? (
<NextLevelComponent data={data} />
) : (
<ExpandButton onClick={this.handleExpand} />
)}
div>
)
}
In the above code, render the next level component NextLevelComponent if data is present, otherwise render the expansion button ExpandButton. After clicking the Expand button, the handleExpand method stores the next level of data in the component state and rerenders the component, which renders the next level.
