Компоненты React не будут отображаться, пока браузер не обновится - PullRequest
Новая
       16

Компоненты React не будут отображаться, пока браузер не обновится

1 голос
/ 07 февраля 2020

Мое приложение работает нормально, за исключением случаев, когда я загружаю страницу, компоненты реагирования вообще не отображаются, вместо этого я вижу пустую страницу. Только когда я обновляю sh страницу, тогда я вижу все мои реагирующие компоненты.

Как я могу отредактировать ее так, чтобы реактивные компоненты загружались при загрузке страницы, а не после того, как я обновил страницу?

Мое приложение использует ax ios для получения данных из 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>
        );
    }

Так я отреагирую на страницу через индекс . js pack: 

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

И вот как индекс. html .erb выглядит так: 

<%= javascript_pack_tag 'index' %>
...