GetProduct thunk 在第一次渲染中触发两次

问：

我正在使用 react 和 redux。尝试获取一些产品，但首先呈现它复制了产品列表。我也使用 useEffect，但不知何故，它渲染了两次并设置了两次产品。 在 redux dev 工具上，该操作也会执行两次。 当我禁用 react strick 模式时，问题就消失了。

我的商店

const store = configureStore({
    reducer:{
        products: ProductReducer,
    },  
})

我的产品切片

const initialState = {
  loading: false,
  products: [],
  error: "",
  offSet:0,
};

export const FetchProducts = createAsyncThunk("products/fetch", (offSet) => {
  return axios
    .get(`https://api.escuelajs.co/api/v1/products?offset=${offSet}&limit=6`)
    .then((respone) => respone.data);
});


const productSlice = createSlice({
  name: "products",
  initialState,
  reducers:{
      setOffSet: (state, action) => {
          state.offSet = action.payload
      }
  },
  extraReducers: (builder) => {
    builder.addCase(FetchProducts.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(FetchProducts.fulfilled, (state, action) => {
        state.products = [
          ...state.products,
          ...action.payload
        ]
      state.loading = false;
    });
    builder.addCase(FetchProducts.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    });
 
  },
});

我的产品视图

export default function ProductView(){
    const dispatch = useDispatch()
    const {loading,products, error, offSet} = useSelector((state) => state.products)

    useEffect(()=>{
        dispatch(FetchProducts(offSet))
    },[dispatch])


    function handleLoadMore(){
        dispatch(setOffSet(offSet+6))
    }
    return(
        <div className="pb-5">
            <div className="md:mx-10 mt-8 mb-5 grid md:grid-cols-6 gap-x-5 gap-y-6">
            {
                products?.map(({id,title,images})=>{
                    return(
                        <div key={id} className="h-60 bg-white flex justify-center ">
                            <div>
                            <img src={images[0]} className="w-max max-h-48" alt={title} height={180} width={160}/>
                            <p>{title}</p>
                            </div>
                        </div>
                    )
                })
            }
            </div>
            <div className="flex justify-center">
                <button onClick={handleLoadMore} className="px-20 py-1 border border-primary text-primary font-semibold">LOAD MORE</button>
            </div>
        </div>
    )
}