多个useSelector与React JS中的DOM重叠

Question

我使用了两个useSelector，令人惊讶的是，它覆盖了以前不应该发生的状态。

import { fetchProduct } from "features/ProductSlice";
import { fetchCategory } from "features/ProductCategorySlice";
const ProductList = () => {
const dispatch = useDispatch()
const { data: products, status } = useSelector((state) => state.product)
const { data: categories } = useSelector((state) => state.productCategory)
useEffect(() => {
const fetchData = async () => {
try {
await Promise(dispatch(fetchProduct()))
dispatch(fetchCategory());
} catch (error) {
// handle or ignore errors?
}
};
fetchData();
}, [dispatch]);
console.log('from list p ', products.length)
console.log('from list c ', categories.length)
... 
}

减速器代码：

产品切片：https://codefile.io/f/5HjRcFqvLWoutajPIJLq

产品类别切片：https://codefile.io/f/IQLrLy6xC4gALqj254j7

视频演示：https://screenrec.com/share/IcJyYuvsKU

由于产品类别是先提取的，产品的价值会随着类别的价值而更新(这很奇怪(。接下来，当产品被提取时，产品将再次更新。但是，产品不应更新两次，只应在产品数据到达时更新。

对于这两种情况，控制台日志的值是相同的。

寻求善意的帮助！！

Answer 1

感谢您在slice和thunk代码中进行编辑——这就是您的问题所在！

每个createAsyncThunk都必须有一个唯一的操作名称。这些thunk不是切片本身的一部分，因此它们不会像从reducers创建的操作那样自动以切片名称为前缀。您应该自己添加前缀，使用像'productCategory/fetch'和'product/fetch'这样的操作名称来保持它们的区别。

(确切的名称无关紧要。你可以使用'fetchCategory'和'fetchProduct'。你只需要确保它们彼此不同。(

现在，您的fetchCategory和fetchProductthunk都将使用type、'fetch/pending'、'fetch/fulfilled'等调度操作，因此它们都将匹配彼此的操作并将数据保存到彼此的状态。

---

更改

export const fetchCategory = createAsyncThunk(
'fetch',
async () => {

至

export const fetchCategory = createAsyncThunk(
'productCategory/fetch',
async () => {

Answer 2

由于首先获取产品类别，因此产品的价值会随着类别的价值而更新(这很奇怪(。

这是您需要在减速器中调试的内容。如果获取类别只写入与state.product分离的state.productCategory，则不应该发生这种情况。

你确定吗；"更新"；你的意思是你看到products.length被用不同的值记录？因为如果只是打印相同的值，那没关系。你不应该假设函数组件的主体被调用的频率，调用console.log。