ReactJS Как активно передавать значения состояния компонентам в App.js

Question

В моем App.js у меня есть следующий код

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            url: config.Url,
            tables : [],
        };
    }

    componentWillMount() { 
        axios.get(this.state.url + '/tables')
            .then(response => {
                if (response.data.status === '200') { 
                    const tables = response.data;
                    this.setState({ tables });
                }
            })
            .catch((error) => {
                console.log('error ' + error);
            });
    }

    render() {
        return (
            <Router>
                <div className="App">
                    <Header tables={this.state.tables}/>
                    <Route exact path='/' component={Login} />
                    <Route exact path='/dashboard' component={Dashboard}/>
                </div>
            </Router>
        );
    }
}

export default App;

При вызове компонента Header состояние заголовка не устанавливается и, следовательно, значения не принимаются внутри заголовка.Что я должен изменить, чтобы получить значения состояния таблицы в моем компоненте заголовка?Я пробовал с componentWillMount и componentDidMount функциями, и оба дают одинаковый ответ.

Answer 1

Что вы должны сделать, это установить нулевое начальное состояние таблиц и в методе рендеринга проверить, является ли «таблицы» нулевым или нет.Поскольку вы извлекаете удаленные данные и ко времени, когда React отображает страницу, данные могут быть не извлечены и не назначены таблицам.

render() {
let tablesToProps = <p>Loading..</p>
if(this.state.tables) {
    tablesToProps = <Header tables={this.state.tables} />
} 
return (
    <Router>
        <div className="App">
            {tablesToProps}
            <Route exact path='/' component={Login} />
            <Route exact path='/dashboard' component={Dashboard}/>
        </div>
    </Router>
);
}

Answer 2

Таким образом, независимо от componentDidMount и componentWillMount, на первом шаге вам нужна таблица проверки с пустым массивом с if (!this.state.tables.length) {, см. Полный код:

import React from 'react';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            url: config.Url,
            tables : [],
        };
    }

    componentWillMount() { 
        axios.get(this.state.url + '/tables')
            .then(response => {
                if (response.data.status === '200') { 
                    const tables = response.data;
                    this.setState({ tables });
                }
            })
            .catch((error) => {
                console.log('error ' + error);
            });
    }

    render() {
        if (!this.state.tables.length) {
            return <div>Loading</div>;
        }

        return (
            <Router>
                <div className="App">
                    <Header tables={this.state.tables}/>
                    <Route exact path='/' component={Login} />
                    <Route exact path='/dashboard' component={Dashboard}/>
                </div>
            </Router>
        );
    }
}

export default App;

Answer 3

Ваш код выглядит отлично, за исключением того, что вам нужно использовать componentDidMount вместо componentWillMount.setState не будет иметь никакого эффекта в componentWillMount, поэтому вы не видите никаких изменений.

Кроме того, взгляните на эту статью: https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/