在 React 中没有本地状态的情况下使用新数据重新渲染组件

Question

我正在练习 react 和 redux，我正在创建一个简单的应用程序，其中我有一个侧边栏，显示在每条路线上可见的类别列表，以及最初显示我拥有的所有书籍以及点击时的主要区域侧边栏上的类别链接主要区域加载另一个组件，其中包含与该类别相关的所有书籍。

这是我在App.js 文件中设置的路线...

class App extends Component {
    async componentDidMount() {
        try {
            await this.props.asyncLoadBooks();
            await this.props.asyncLoadCategories();
        } catch (error) {
            console.log(error);
        }
    }

    render() {
        return (
            <>
                <Header />
                <div className="global-wrapper">
                    <div className="container">
                        <aside className="side-bar">
                            <Categories />
                        </aside>

                        <main className="main-content">
                            <Switch>
                                <Route exact path="/" component={Books} />
                                <Route
                                    exact
                                    path="/category/:id"
                                    component={Category}
                                />
                                <Route component={NotFound} />
                            </Switch>
                        </main>
                    </div>
                </div>
            </>
        );
    }
}

在App.js 中，您可以看到我通过本地JSON 文件加载数据，其中booksActions 和booksActions 和categoriesAction 的Actions 文件中带有axios，这非常简单。

这里是类别组件...

class Categories extends Component {
    render() {
        const { categories } = this.props;

        let categoriesList;

        if (categories && categories.length !== 0) {
            categoriesList = categories.map(category => (
                <li key={category.id}>
                    <Link to={`/category/${category.id}`}>{category.name}</Link>
                </li>
            ));
        } else {
            categoriesList = <Loading />;
        }
        return (
            <div>
                <h2>Categories</h2>
                <ul>{categoriesList}</ul>
            </div>
        );
    }
}

const mapState = state => ({
    categories: state.categories.categories
});

export default connect(mapState)(Categories);

我正在单个 Category 组件的 ComponentDidMount() 中触发另一个操作，以获取与该组件相关的所有书籍并呈现它们...

class Category extends Component {
    componentDidMount() {
        this.props.getCategoryBooks(this.props.match.params.id);
    }

    componentDidUpdate(prevProps) {
        if (prevProps.match.params.id !== this.props.match.params.id) {
            this.props.getCategoryBooks(this.props.match.params.id);
        }
    }

    render() {
        const { categoryBooks } = this.props;
        return (
            <div>
                {/* <h1>{this.props.match.params.id}</h1> */}
                {categoryBooks &&
                    categoryBooks.map(book => {
                        return <div key={book.id}>{book.title}</div>;
                    })}
            </div>
        );
    }
}

const mapState = state => ({
    categories: state.categories.categories,
    categoryBooks: state.books.categoryBooks
});

const mapActions = {
    getCategoryBooks
};

export default connect(
    mapState,
    mapActions
)(Category);

现在，第一次一切正常，但是，当我单击另一个类别时，<Category /> 组件没有更新，因为我在 componentDidMount() 中调度操作，因此该组件已在第一次安装，因此在我单击另一个类别后它不会再次调度操作，现在处理这个问题的最佳方法是什么？

第二个问题是我在类别路由http://localhost:3000/category/9967c77a-1da5-4d69-b6a9-014ca20abd61 上，我尝试刷新页面，侧边栏上的类别列表加载正常，但单个组件显示为空，当我查看 redux- devtools 我发现GET_CATEGORY_BOOKS 操作在App.js 文件中的LOAD_BOOKS 和LOAD_CATEGORIES 之前被触发，因为子componentDidMount() 方法在其父等效方法之前被调用。怎么解决呢？

我希望你们能帮助我。

编辑

正如@@NguyễnThanhTú 注意到的，componentDidupate 有一个错字，现在点击另一个类别时它可以工作。 这给我们留下了第二个问题，在类别路由中重新加载页面时，由于 App.js componentDidMount 在其子组件之后触发，因此数据不显示。

编辑

这是这个项目在 Github 上的一个 repo ... https://github.com/Shaker-Hamdi/books-app

Answer 1

在您的booksActions.js 中，添加以下内容：

export const getCategoryBooksV2 = categoryId => {
    return async (dispatch, getState) => {
        const { books } = getState();
        if (books.books.length === 0) {
            console.log('Only executing once')  // testing purpose only
            const response = await axios.get("books.json");
            const data = response.data.books;
            dispatch(loadBooks(data));
            dispatch(getCategoryBooks(categoryId));
        }
        dispatch(getCategoryBooks(categoryId));
    };
};

在您的 Category.js 中，使用新的动作创建器：

import { getCategoryBooksV2 } from "../books/booksActions";
...
componentDidMount() {
    this.props.getCategoryBooksV2(this.props.match.params.id);
}
...
const mapActions = {
    getCategoryBooksV2
};

这个解决方案的灵感来自这个例子：

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}

来自Redux-Thunk Documentation

这是演示：