React - 当父级更改时更新子组件中的 state

Question

I have a simple application with two react components:

1. vacancies.jsx - lists vacancies
2. counter.jsx - shows the number of vacancies from vacancies.jsx

When the application loads the counter shows the correct number of vacancies, but as I start adding/deleting vacancies in vacancies.jsx the count stays the same.

vacancies.jsx:

export class Vacancy extends React.Component {

    constructor(props) {

        super(props);

        this.state = { vacancies: [], loading: true, title:"" };

        fetch('/api/Vacancy/Vacancies')
            .then(response => response.json())
            .then(data => {
                this.setState({ vacancies: data, loading: false });
            });
    }

    delete(id) {

        var vacancies = this.state.vacancies;

        this.setState(
            {
                vacancies: this.state.vacancies.filter((v) => {
                    return (v.id != id);
                })
            });

    }

    loadVacancies(vacancies) {
        return (
            <table className='table table-striped'>
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Min Salary</th>
                        <th>Max Salary</th>
                    </tr>
                </thead>
                <tbody>
                    {vacancies.map(v =>
                        <tr key={v.id}>
                            <td>{v.title}</td>
                            <td>{v.currency} {v.minSalary}</td>
                            <td>{v.currency} {v.maxSalary}</td>
                            <td>
                                <a href="#" onClick={(id) => this.delete(v.id)}>Delete</a>
                            </td>
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

    render() {

        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : this.loadVacancies(this.state.vacancies);

        return (
            <div>
                {contents}
            </div>
        );
    }
}

const containerElement = document.getElementById('content');
ReactDOM.render(<Vacancy />, containerElement);

counter.jsx

import { Vacancy } from "./vacancies";

export class Counter extends Vacancy {

    constructor(props) {

        super(props);
    }

    render() {

        return (
            <div>
                <h1>Items:{this.state.vacancies.length}</h1>
            </div>
        );
    }
}

ReactDOM.render(<Counter />, document.getElementById('counter'));

UI:

Answer 1

According to the react team, they recommend using composition instead of inheritance:

React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.

And

At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.

https://reactjs.org/docs/composition-vs-inheritance.html

So based on your code, recreate your Counter component like this:

export const Counter = props => {
    return (
        <div>Items: {props.items}</div>
    );
};

Then just change your Vacancies component including your new Counter component there:

loadVacancies(vacancies) {
    return (

        <Counter items={this.state.vacancies.length} />

        <table className='table table-striped'>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Min Salary</th>
                    <th>Max Salary</th>
                </tr>
            </thead>
            <tbody>
                {vacancies.map(v =>
                    <tr key={v.id}>
                        <td>{v.title}</td>
                        <td>{v.currency} {v.minSalary}</td>
                        <td>{v.currency} {v.maxSalary}</td>
                        <td>
                            <a href="#" onClick={(id) => this.delete(v.id)}>Delete</a>
                        </td>
                    </tr>
                )}
            </tbody>
        </table>
    );
}