TypeError: Products.find 不是 (react/typescript) 中的函数

Question

I use redux thunk

why? find is notFunction

on console log redux given data

help pls I have a strange problem because even data is sent inside the console and I can access the data but can not find in Redax even the initial value of the Hats object

my dependency

import React, { useEffect } from 'react';
import * as b from 'react-bootstrap';
import { useHistory } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux'
import { productsDetailActions } from '../StateManagement/Actions/productActions';

type Props = {
    match: any;
    params: any;
    pro: any,

}
interface PropsInterface {
    match: Props;
}

const SingleProduct = ({ match }: PropsInterface) => {
    const dispatch = useDispatch()
    console.log(match.params.id)
    useEffect(() => {
        dispatch(productsDetailActions(match.params.id))
    }, [])
    const Products = useSelector((state: any) => (state.productDetail.product))
    console.log(Products)
    const product = Products.find((item: any) => {
     return  item._id === match.params.id
    })
    console.log(product)
    const history = useHistory()


    return (
        <div>
            <b.Row className='my-2 '>
                <b.Col>
                    <b.Button className='btn-danger' onClick={() => history.goBack()}>بازگشت</b.Button>
                </b.Col>
            </b.Row>
            <b.Row>
                <b.Col md={5}>
                    <b.Card className="shadow-sm p-3 mb-5 bg-white">
                        <b.Card.Body className=''>
                            <b.Image src={product && product?.image} fluid />
                            <b.Card.Text className="text-center">{product && product?.description}</b.Card.Text>
                        </b.Card.Body>
                        <b.Card.Body className="text-muted">
                            <h3 style={{ textAlign: 'center' }}>{product && product?.name}</h3>
                        </b.Card.Body>
                    </b.Card>
                </b.Col>
                <b.Col xs={5} md>
                    <b.Card className='shadow-sm p-3 mb-5 bg-white'>
                        <b.Card.Header>
                            <h5 style={{ textAlign: 'center' }}>{product && product?.name}</h5>
                        </b.Card.Header>
                        <b.Card.Body>
                            <b.ListGroup variant='flush'>
                                <b.ListGroup.Item>
                                    {product && product?.description}
                                </b.ListGroup.Item>
                                <b.ListGroup.Item>
                                    {product && product?.name}
                                </b.ListGroup.Item>
                            </b.ListGroup>
                        </b.Card.Body>
                        <b.Card.Footer>
                            <b.Button type='button' className='btn btn-block' >خرید محصول</b.Button>
                        </b.Card.Footer>
                    </b.Card>
                </b.Col>
            </b.Row>
        </div>
    )

}

export default SingleProduct

How can I prevent such problems from occurring? I have a similar one even on the map method

and my reducers are the following:

interface ActionInterface {
    payload?: any,
    type?:string
}

type state = {
    state: any,
    loading: boolean,
    products?:any
}
const initialState = {
    products: [],
    loading:false,
}
export const productReducers = (state=initialState,action:ActionInterface) => {
    switch (action.type) {
        case 'send_req':
            return { loading: true, products: [] }
        case 'req_success':
            return { loading: false, products: action.payload }
        default:
            return state
    }
}

export const productDetailReducers = (state={product:{}},action:ActionInterface) => {
    switch (action.type) {
        case 'send_req_detail':
            return { loading: true, ...state}
        case 'req_success_detail':
            return { loading: false, product: action.payload }
        default:
            return state
    }
}

and these are the actions :

import axios from 'axios'

export const productsActions = () => async (dispatch: any) => {
    
    try {
        dispatch({ type: 'send_req' })
        const response = await axios.get('http://localhost:8001/api/products')
        dispatch({ type: 'req_success', payload: response.data})
    }catch (err) {
        console.log(err)
    }
   
}
export const productsDetailActions = (id:any) => async (dispatch: any) => {
    
    try {
        dispatch({ type: 'send_req_detail' })
        const response = await axios.get(`http://localhost:8001/api/products/${id}`)
        dispatch({ type: 'req_success_detail', payload: response.data })
        console.log(response.data)
    }catch (err) {
        console.log(err)
    }
   
}

Answer 1

There's a chance you are using the wrong keys to grab something from your redux store. You are seeing this error: Product.find is not a function because your Product is likely not an array. I can affirm the above looking at your reducer function for product detail:

export const productDetailReducers = (state={product:{}},action:ActionInterface) => {

Notice that the initial state value here is: product:{} .

hence const Products = useSelector((state: any) => (state.productDetail.product)) will return {} which DOESN'T have a find method.

Review these lines:

const Products = useSelector((state: any) => (state.productDetail.product))
    console.log(Products)
    const product = Products.find((item: any) => {
     return  item._id === match.params.id
    })

And maybe set product=[] here:

export const productDetailReducers = (state={ product:[] }, action: ActionInterface) => {

It'll be helpful if you could share a snippet of your store object.

Tip: you should really ever use any in TS as last resort.