Javascript 使用React和Firebase时，TodoItems不会出现在UI中

我正在关注Traversey Media的React，我想将他为保存TodoItems而构建的内容扩展到Firebase实时数据库。TodoItems保存得很好，但不会显示在UI中

我曾尝试让应用程序以硬编码的TodoItem启动，以防出现空数组的问题，但这没有任何帮助

相关方法：

完整代码可在

你不需要把这个绑在这里

您只需要创建一个匿名函数，并在该匿名函数中使用给定id调用markComplete和delTodo函数

    render() {
        const { id, title } = this.props.todo;
        return (
            <div style={this.getStyle()}>
                <p>
                    <input type="checkbox" onChange={() => this.props.markComplete(id)} />{' '}
                    { title }
                    <button className="delete" style={btnStyle} onClick={() => this.props.delTodo(id)}>x</button>
                </p>
            </div>
        )
    }
}

---

发布TodoItem组件。@ravibagul91完成，谢谢！嗨，保罗，检查我的解决方案，让我知道这是否有帮助。我发现了部分问题。。。今天晚上我有一个流浪汉。在App.js中。但在实现您的更改后，我可以添加todo项，但它们不会在页面加载时加载。这意味着当您加载Todos组件时，this.state.Todos是空的。由于您有单独的“关于”组件，同样，您可以单独使用Todos组件并移动该组件中的所有逻辑。我已经有一个Todos组件，你建议我搬进去干什么？有意思，我试试这个

class Todos extends Component {
  render(){
    return this.props.todos.map((todo)=>(
        <TodoItem todo={todo} markComplete={this.props.markComplete} delTodo={this.props.delTodo}/>  
    ));
  }
}

render() {
        const { id, title } = this.props.todo;
        return (
            <div style={this.getStyle()}>
                <p>
                    <input type="checkbox" onChange={this.props.markComplete.bind(this, id)} />{' '}
                    { title }
                    <button className="delete" style={btnStyle} onClick={this.props.delTodo.bind(this,id)}>x</button>
                </p>
            </div>
        )
    }
}

  67 |     title: title,
  68 |     completed: false
  69 |   }
> 70 |   todosRef.set(newTodo).then(
^ 71 |     this.setState({todos: [...this.state.todos, newTodo]})
  72 |   );
  73 | };

262 | 
263 | this.onSubmit = e => {
264 |   e.preventDefault();
> 265 |   this.props.addTodo(this.state.title);         
266 |   this.setState({
267 |     title: ''
268 |   });

onClick={this.props.delTodo.bind(this,id)}

    render() {
        const { id, title } = this.props.todo;
        return (
            <div style={this.getStyle()}>
                <p>
                    <input type="checkbox" onChange={() => this.props.markComplete(id)} />{' '}
                    { title }
                    <button className="delete" style={btnStyle} onClick={() => this.props.delTodo(id)}>x</button>
                </p>
            </div>
        )
    }
}