Question

我试图编写一个应用程序，该应用程序将是一个计数器列表。单击“添加计数器”按钮可添加每个计数器组件。单个计数器组件包含用于减少内部计数器的“-”号，用于显示实际值的内部计数器，用于显示内部计数器的“ +”号，用于将内部计数器重置为零的复位以及用于删除实际单个计数器组件的按钮“删除计数器”。

问题是，如果我运行该应用程序，则不会出现任何错误，但行为会出错。如果我单击“-”，“ +”，“重置”，“删除计数器”，它们将出错，所有组件消失，并且一个组件持续运行而没有内部计数器，但是所有正常情况都在计数器组件中发生。

这是我在减速机中删除计数器组件的案例：

    case 'DELETE_COUNTER':
      return {
        ...state,
        counters: [
          state.counters.filter(element => {
            if (action.payload == element.id) {
              return false;
            }
            return true;
          }),
        ],
      };

多数民众赞成在我的计数器组件中呈现：

render() {
    const counters = this.props.counters;


    return counters.map(element => {
      return (
        <div className="count">
          <div className="counter">
            <h2>Counter</h2>
          <button onClick={this.decrement}>&ndash;</button>
          <span className="count">{element.count}</span>
          <button onClick={() => this.props.increment(element.id)}>+</button>
          <p>
            <button onClick={this.reset}>RESET</button>
          </p>
          <button onClick={() => this.props.deleteCounter(element.id)}>Delete Counter</button>
          </div>       
        </div>
      );
    });
  }
}

存储库：

https://github.com/kneeidle/redux_app

在Redux中更新状态并显示更改的问题

0 个答案: