Question

我正在尝试实现一个添加按钮，单击它将呈现一个组件。现在该组件一旦安装就会获取数据（在format(Post_Day, ""%Y-%m")中进行调用）。在我的实现中，即使我添加了一个新组件，即使是旧组件也会再次安装，这不是我想要的。

这是我的组件

var ctAdviceFromStore = ctFromStore.CallTrackerClients
        .FirstOrDefault(c => c.CallTrackerClientId == clientId)?.CallTrackerClientAdvice;

现在，发生的事情是，每当我添加一个新组件时，即使再次安装旧组件，它也会开始获取已经获取的数据。我该如何纠正？如何在不使用componentDidMount()的情况下动态添加新组件而无需先将动态添加的组件打到DOM中？

Answer 1

不要将Component实例存储在内部状态，存储渲染它所需的数据。 React是自上而下的数据到UI流程。

假设您的Panel需要一个id，为了简单起见，它将成为数组中的索引。将您的代码更改为以下内容：

class MyComponent extends React.Component{
        constructor(){
            super()
            this.state = {
                panels = []
            }
        }

        handleClick(event){
             const nextId = this.state.panels.length + 1
             this.setState({
                  panels: this.state.panels.concat([nextId])
             })
        }
        render(){
            return(
               <div>
                 <button onClick={this.handleClick.bind(this)}>Add new</button>
                 <div className='panel-wrapper'>
                  {
                    this.state.panels.map((panelId) => (
                      <Panel key={panelId} id={panelId} />
                    )
                  }
                  </div>
                 </div>
            )
        }
     }

通过设置一个键，React将知道哪个是新的，哪个已经在前一个渲染中。这是React方式，您更新数据，让渲染函数在任何给定时刻使用该数据来表示您的UI。

希望有所帮助：）

Answer 2

你正试图以无反应的方式做到这一点。反应方式是让渲染方法显示尽可能多的组件，如状态所描述的那样，是0,1,2 ...然后你添加按钮会再添加一个元素到状态，渲染将显示所有这些元素，并且您无需担心安装组件等。

有一个Button在React中添加相同的组件

2 个答案: