ReactJS：从路由获取数据，并通过父组件将其传递给组件

Question

我是ReactJS的新手。我需要将Laravel应用程序的前端转换为ReactJS应用程序。在此应用程序中，我在App.js文件中创建了一个布局，该布局在整个应用程序中都是恒定的。看起来像这样：

App.js

export default class App extends Component
{
    constructor() {
        super();

        this.state = {
            footer: ''
        };
    }

    render()
    {
        return (
            <BrowserRouter>
                <Header />

                <Switch>
                    <Route exact path={"/"} component={Index} />
                    ...
                </Switch>

                <Footer footerData={this.state.footer} />
            </BrowserRouter>
        );
    }
}

Index.jsx

export default class Index extends Component
{
    constructor(props) {
        super(props);

        this.state = {
            aboutUs: null
        };
    }

    componentDidMount() {
        Axios
            .get(`${process.env.REACT_APP_API_URL}home`)
            .then((response) => {
                const { data } = response.data.response;

                this.setState({
                    aboutUs: data.about_us
                });
            }).catch((error) => {
                console.log(error);
            })
    }

    render()
    {
        return (
            <div className="home">
                ...
            </div>
        )
    }
}

但是，在Footer组件中，About us部分是用数据库中的数据绘制的，数据库中的数据随每个Api请求一起出现，并在相关页面上提供其余所需数据。

我不想创建一个单独的请求，只是为了获取此部分的数据。有什么方法可以将数据从Api传输到App.js，然后再传输到Footer组件。？

Answer 1

[如果要从index.jsx组件更新App.js组件中的状态，则应将函数从App.js传递到Index.js，后者将更新App.js组件中的状态。我为此添加了方法updateAboutUs。

App.js

export default class App extends Component
{
    constructor() {
        super();

        this.state = {
            footer: ''
            aboutUs: null,
        };

        this.updateAboutUs = this.updateAboutUs.bind(this);
    }

    function updateAboutUs(data) {
        this.setState({aboutUs: data});
    }

    render()
    {
        return (
            <BrowserRouter>
                <Header />

                <Switch>
                    <Route exact path={"/"} render={(props) => <Index {...props} updateAboutUs={this.updateAboutUs} />} />
                    ...
                </Switch>

                <Footer footerData={this.state.footer} />
            </BrowserRouter>
        );
    }
}

Index.jsx

export default class Index extends Component
{
    constructor(props) {
        super(props);

        this.state = {
            aboutUs: null
        };
    }

    componentDidMount() {
        Axios
            .get(`${process.env.REACT_APP_API_URL}home`)
            .then((response) => {
                const { data } = response.data.response;

                //this.setState({
                //    aboutUs: data.about_us
                //});

                props.updateAboutUs(data.about_us);

            }).catch((error) => {
                console.log(error);
            })
    }

    render()
    {
        return (
            <div className="home">
                ...
            </div>
        )
    }
}

希望这会有所帮助。