parent class 中的状态发生变化时如何更新组件？

Question

Parent class（删除了一些不相关的代码）：

class AddCategory extends React.Component{
constructor() {
    super();
    this.state = {
        update: '',
        category_name: ''
    }
}


update(changed) {
    this.setState({
        update: changed,
    })
}

render() {
      const create_category = () => {
        Axios.post('/createCategory', {
            category_name: this.state.category_name,
        }).then((response) => {

        })
      }

      
    return (
        <div>
            //changes the update state to 1 because there was an update
            <button className="btn" onClick={this.update('1'); create_category()}}>Add</button>
        </div>
        )
}
}

export default AddCategory;

Child class（删除了一些不相关的代码）：

class AddSubcategory extends AddCategory {

constructor() {
    super();
    this.state = {
        subcategory_name: '',
        category_id: '',
        result: [],
        is_loading: true
    }
}

set_fetched_data(data, is_fetched) {
    this.setState({
        result: data,
        is_loading: is_fetched
    })
}

//fills the select box with db entries
//need to update the result array every time 'update' state changes
componentDidMount() {
    Axios.get('/categories').then((response) => {
        const category_list = response.data.result;
        this.set_fetched_data(category_list.map(category => <option value={category.id}>{ category.category_name }</option>), false);
    })
}


render() {
    const create_subcategory = () => {
        Axios.post('/createSubcategory', {
            subcategory_name: this.state.subcategory_name,
            category_id: this.state.category_id
        }).then((response) => {

        })
    }

return (
    <div>
        <select name="categories" onChange={(e) => {this.set_category_id(e.target.value)}}>
            <option defaultValue>-</option>
            { !this.state.is_loading && this.state.result }
        </select>
        <input type="text" onChange={(e) => {this.set_subcategory_name(e.target.value)}}/>
        {!this.state.is_loading && <button className="btn" onClick={create_subcategory}>Add</button>}
    </div>
)
}

}

export default AddSubcategory

需要弄清楚如何访问 child class 中的 'update' 状态 + 如何监听状态的变化以不断更新我的选择框 - 最初我打算使用 useEffect() 来做到这一点，但是在将这两个函数重新设计为 classes 之后，我发现这是不可能的。

Answer 1

如果您使用类而不是函数，那么您不能使用 useEffect 或 useContext 等挂钩。

我强烈建议 using react-redux 进行跨应用程序状态管理。您需要进行一些设置，但您将获得所有组件都可以访问的共享状态 - 无论级别如何。

这里有一个 step by step 用于 React 项目的基本设置。

parent class 中的状态发生变化时如何更新组件？

How to update component when state in parent class changes?

reactjs

use-state