Question

我的应用程序运行正常，但当我加载页面时，反应组件根本不显示，而是看到一个空白页面。只有刷新页面后，我才能看到所有的React组件。

如何编辑它，以便在加载页面时而不是在刷新页面后加载反应组件？

我的应用程序使用axios从ruby后端获取数据，该数据在Home组件中看起来像这样：

componentDidMount() {
        axios.get(`/api/v1/todo_lists/${this.state.todo_list_id}/todo_items.json`)
            .then(response => {
                this.setState({ todo_items: response.data })
            })
            .catch(error => console.log(error.response.data))
    }
render() {
        return (
            <div>
                <div>
                    <button className="newTodoListButton" onClick={this.addNewTodoList} >
                        New Todo List
                    </button>
                </div>
                {this.state.todo_lists.map((todo_list) => {
                    if (this.state.editingTodoListId === todo_list.id) {
                        return (<TodoListForm todo_list={todo_list} key={todo_list.id} updateTodoList={this.updateTodoList}
                            titleRef={input => this.title = input} />)
                    } else {
                        return (<TodoBox todo_list={todo_list} key={todo_list.id} onClick={this.enableEditing}
                            onDelete={this.deleteTodoList} />)
                    }
                })}
            </div>
        );
    }

这是我通过index.js包对页面进行反应的方式：

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Home />,
    document.body.appendChild(document.createElement('div')),
  )
})

这是index.html.erb的样子：

<%= javascript_pack_tag 'index' %>

除非刷新浏览器，否则React组件不会呈现

0 个答案: