Question

我试图在同时学习ReactJS的同时创建一个简单的待办事项列表。

对于我的待办事项列表中的每个项目，它们均按group分组。例如，我拥有Purchases和Build Airplane组，以及task下每个group的完成时间。

我试图显示组名以及该组下完成了多少个任务。

然后，当您单击一个组名时，页面会更改为显示各个任务。

经过数小时的尝试找出问题所在，我确定在创建组名时，正在创建元素时会调用要传递的onClick。

我在父App文件中

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toDoItems: null,
      uniqueGroups: null,
      currentView: "AllGroup"
    };
  }

  componentDidMount = () => {
    let uniqueGroups = [];
    fetch("/data.json")
      .then(items => items.json())
      .then(data => {
        for (let i = 0; i < data.length; i++) {
          if (!uniqueGroups.includes(data[i].group)) {
            uniqueGroups.push(data[i].group);
          }
        }
        this.setState({
          toDoItems: [...data],
          uniqueGroups: uniqueGroups,
        });
      })
  };

  onH2Click = (givenGroup) => {
    this.setState({
      currentView: givenGroup
    })
    console.log(this.state.currentView);
  }


  render() {
    if (this.state.toDoItems && this.state.uniqueGroups) {
      // console.log(this.state.currentView);
      return (
        <div>
          {this.state.currentView === "AllGroup" && <AllGroupView onH2Click={this.onH2Click} taskProgress={this.state.taskProgress} uniqueGroups={this.state.uniqueGroups} toDoItems={this.state.toDoItems} />}
          {this.state.currentView !== "AllGroup" && <SpecificGroupView onH2Click={this.onH2Click} />}
        </div>
      );
    } else {
      return <h1>Loading</h1>
    }

  }
}

然后我有两个组件。

AllGroupView

class AllGroupView extends Component {
  render() {
    let toDoItems = this.props.toDoItems;
    let uniqueGroups = this.props.uniqueGroups;
    let listItems = [];

    for (let n = 0; n < uniqueGroups.length; n++) {
      let completed = 0;
      let total = 0;
      for (let i = 0; i < toDoItems.length; i++) {
        if ((toDoItems[i].group === uniqueGroups[n])) {
          total++;
          if (toDoItems[i].completedAt) {
            completed++;

          }
        }
      }
      listItems.push(<li key={n}><h2 className="h2" onClick={this.props.onH2Click(uniqueGroups[n])} >{uniqueGroups[n]}</h2><p>{completed} OF {total} TASKS COMPLETE</p></li>);
    }
    return (
      <div>
        <h1>Things To Do</h1>
        <ul className="custom-bullet arrow">
          {listItems}
        </ul>
      </div>
    )
  }
}

然后是SpecificGroupView组件（尚未处理）

class SpecificGroupView extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <h1>Task Group 1</h1>
          <h2 onClick={this.props.onH2Click("AllGroup")}>ALL GROUPS</h2>
        </div>
        <ul className="custom-bullet">
          <li className="locked">
            <h2>Locked Task</h2>
          </li>
          <li className="incomplete">
            <h2>Incomplete Task</h2>
          </li>
          <li className="completed">
            <h2>Completed Task</h2>
          </li>
        </ul>

      </div >
    )
  }
}

所以我希望它看起来像这样

https://i.imgur.com/JDsTrNg.png

当我单击Purchases时，我想更改currentView

使用上面的代码，我得到的错误是

已超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 React限制了嵌套更新的数量，以防止无限循环。

突出显示的行是

 listItems.push(<li key={n}><h2 className="h2" onClick={this.props.onH2Click(uniqueGroups[n])} >{uniqueGroups[n]}</h2><p>{completed} OF {total} TASKS COMPLETE</p></li>);

我认为我应该改用map，但是我不确定如何将当前逻辑适合map。有任何想法吗？并非常感谢大家！

Answer 1

使用onClick={this.props.onH2Click(uniqueGroups[n])}可以直接调用该函数，而不是传递它。

使用ES6箭头功能：

listItems.push(<li key={n}><h2 className="h2" onClick={() => this.props.onH2Click(uniqueGroups[n])} >{uniqueGroups[n]}</h2><p>{completed} OF {total} TASKS COMPLETE</p></li>);

将解决它。

如何在不激活ReactJS中的onClick的情况下推送元素？

1 个答案: