javascript - 重复组件的 react 组件状态问题

Question

我最近开始学习 React，我有点困惑。

请看下面codepen或下面的代码片段。

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      sessions: [],
      sessionSelected: null
    }
    this.addSession = this.addSession.bind(this);
    this.switchSession = this.switchSession.bind(this);
  }

  addSession() {
    let sessions = this.state.sessions;
    let id = (sessions.length)
    let title = "Session " + id;
    let session = <Session title={title} index={id + 1} />;
    sessions.push(session);
    this.setState({
      sessions: sessions,
      sessionSelected: id
    });
  }

  switchSession(id) {
    this.setState({
      sessionSelected: id
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.addSession} >+ Add Session</button>
        <div>{this.state.sessions[this.state.sessionSelected]}</div>
        <div className="switchers">
          {this.state.sessions.map((x, i) => {
            return <SessionSwitcher index={i + 1} onClick={() => { this.switchSession(i) }} />;
          })}
        </div>
      </div>
    );
  }
}

class Session extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
    this.startTimer = this.startTimer.bind(this);
    this.count = this.count.bind(this);
  }
  startTimer() {
    setInterval(this.count, 1000);
  }
  count() {
    this.setState({
      count: this.state.count + 1
    });
  }
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.state.count}</p>
        <button onClick={this.startTimer}>Start Timer</button>
      </div>
    )
  }
}

class SessionSwitcher extends React.Component {
  render() {
    return (
      <div className="switcher" onClick={this.props.onClick}>
        <span>{this.props.index}</span>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('#app')
);

我希望能够在多个组件中触发多个计时器。

出于某种原因，当我在一个组件中单击启动计时器时，它也会为其他组件触发它。

有人可以向我解释我做错了什么吗？

Answer 1

您可以更改以下几项以获得更可预测的体验:

1. 与其将 JSX 存储在状态中(这是一个复杂的对象)，不如仅存储 id，并根据该 id 呈现 JSX。

2. 尽量不要就地改变状态(就像 push 到一个已经处于状态的数组)。

3. 如果您希望跨组件拥有持久计时器，无论当前选择了哪些组件，请确保在取消选择时不要卸载它们。

这是您的 <App/> 的相关更新部分组件(请注意，这些是比最佳实践更快速的修复):

  addSession() {
    const id = this.state.sessions.length;
    this.setState( state => ({
      // treat your state as immutable
      sessions: state.sessions.concat( id ),
      sessionSelected: id
    }));
  }

  // don't unmount when switching components, just hide
  render() {
    return (
      <div>
        <button onClick={this.addSession} >+ Add Session</button>
        <div>
          { this.state.sessions.map( session => 
            <div style={{ display: session === this.state.sessionSelected ? 'block' : 'none' }}>
              <Session title={"Session " + session} />
            </div>
          )}
        </div>
        <div className="switchers">
          {this.state.sessions.map((x, i) => {
            return <SessionSwitcher index={i + 1} onClick={() => { this.switchSession(i) }} />;
          })}
        </div>
      </div>
    );
  }

在这里试试:https://codepen.io/glortho/pen/ZrLMda?editors=0011