Question

所以我在使用React，Firebase和Node创建的这个基本任务应用程序时遇到了一个小问题。我有在heroku上托管的工作版本（将在下面发布链接），所以你可以用它来看看我的意思。

我的问题

如果您访问我的应用程序的链接，您可以看到，当您最初单击“获取任务”按钮时，任务不会加载到屏幕上。只需点击两下即可将列表填充到屏幕上。

另外，当你点击关闭图标试图删除特定任务时，那么......你会看到你自己的双眼会发生什么，哈哈。

我的想法 虽然我很高兴它至少有效，但我觉得主要的罪魁祸首就是我在grabTasks函数中创建的代码。不要问为什么我创建了一个变量名为x的随机空数组，我也没有任何线索，这是我能让它工作的唯一方法。我已经阅读了所有的firebase文档，所以我希望有人可以告诉我这个问题是什么，并且可能建议一个更好的方法来解决这个问题。代码＆amp;以下链接。

Link to working Heroku App

App.js

// App.js
export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = { tasks: [] };
    this.grabTasks = this.grabTasks.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  // Grabs the list of tasks from the firebase database
  // and then sets the state to x.
  grabTasks() {
    var x = [];
    db.ref('tasks').on('value', function(snapshot) {
       return x = snapshot.val();
    });
    this.setState({ tasks : x });
  }

  // In charge of removing the task items when they are clicked.
  // This function is passed to TaskItems via props
  handleDelete(taskToDelete) {
       var newTasks = _.reject(this.state.tasks, function(task) {
           return task == taskToDelete
       });
       this.setState({tasks: newTasks});
     }

  render() {
    return (
      <div id="wrapper">
        <div id="navigation">
          <Navbar />
        </div>
        <div id="content">
          <div className="container">
            <div className="row">
              <h2>Tasks</h2>
              <div onClick={this.grabTasks} className="btn">Get Tasks</div>
              <TaskItems tasks={this.state.tasks} handleDelete={this.handleDelete} />
            </div>
          </div>
        </div>
      </div>
    )
  }
}

TaskItems.js

// TaskItems Child Component
const TaskItems = (props) => {
  var hello = props.tasks.map((task,index) => {
    return(
      <li className="collection-item" key={index}>
        {task}
        <a onClick={props.handleDelete.bind(this, task)}>
          <i className="fa fa-times-circle remove-task" aria-hidden="true"></i>
        </a>
      </li>
    );
  });

  return (
    <div>
      <ul className="collection">
        {hello}
      </ul>
    </div>
  );
}

export default TaskItems

Answer 1

您的db.ref('tasks')是异步方法。你不应该认为它是同步的。试试这个：

grabTasks() {
 var that = this;
 db.ref('tasks').on('value', function(snapshot) {
   var x = snapshop.val();
   that.setState({tasks : x})
 });
}

在加载屏幕时获取这些任务：

componentDidMount(){
  this.grabTasks();
}

具有Firebase问题的React阵列映射

1 个答案: