Невозможно использовать функцию поиска внутри функции возврата в реактивном проекте

Question

Я пытался использовать функцию поиска внутри функции возврата компонента реакции. но не работает отчет об ошибке показывает анонимную функцию. То, что я пытался сделать, это выбрать «product» и «category» из API через redux и отобразить список продуктов вместе с названием категории вместо categoryid, сохраненного в объекте продукта ** ВОПРОС КАК СДЕЛАТЬ ЭТУ РАБОТУ category = category.find (category => category.id === product.category) **

    import React,{useEffect} from 'react'
import {useSelector,useDispatch} from 'react-redux'
import {fetchProduct} from '../../../actions/product.actions'
import {fetchCategory} from '../../../actions/category.actions'
import { Table } from 'semantic-ui-react'


const ProductList=()=>{
    const productsData=useSelector(state=>state.products)
    const categoriesData=useSelector(state=>state.categories)
    const dispatch=useDispatch()
    const category={}
    const categories=categoriesData.categories[1]

    useEffect(()=>{
        dispatch(fetchProduct())
        dispatch(fetchCategory())


    },[])

    const findCategory=(categoryId)=>{
    return categories.find(category => category.id === categoryId)
    }

    return productsData.loading ?(

        <h2>Loading</h2>
    ): productsData.error?(
        <h2>{productsData.error}</h2>
    ):(
        <div>

            <Table striped>
                <Table.Header>
                <Table.Row>
                    <Table.HeaderCell>Name</Table.HeaderCell>
                    <Table.HeaderCell>Category</Table.HeaderCell>
                    <Table.HeaderCell>Brand</Table.HeaderCell>
                    <Table.HeaderCell>Model</Table.HeaderCell>        
                </Table.Row>
                </Table.Header>

                <Table.Body>
                    {
                        productsData.products.map(product=>{
                            category = categories.find(category => category.id === product.category)      

                            return(

                                <Table.Row key={product.id}>
                                    <Table.Cell>{product.name}</Table.Cell>
                                    <Table.Cell>{category.name}</Table.Cell>
                                    <Table.Cell>{product.brand}</Table.Cell>
                                    <Table.Cell>{product.model}</Table.Cell>
                                </Table.Row>
                            )
                        })
                    }


                </Table.Body>
        </Table>
        {console.log(categories)}
        {console.log(productsData) }
        </div>
    )
}

export default ProductList

Answer 1

Вы на самом деле не упоминаете , что ошибка, которую вы видите (кроме случаев, когда она возникает в анонимной функции), но я подозреваю, что некоторые "не могут получить доступ к undefined", либо в самом обратном вызове функции find или в возвращаемом значении функции map.

Не определено в обратном вызове Find?

category = categories.find(category => category.id === product.category)

Вот оно отображается только product . Может быть быть неопределенным при попытке доступа к product.category. По определению category должен быть определен, поскольку он основан на отображении в массив categories.

Но по той же причине, что мы знаем, что мы можем проверить category.id мы знаем product определяется из анонимной области обратного вызова внешней карты, и проверка product.category безопасна.

Не определено в обратном вызове карты?

productsData.products.map(product=>{
  category = categories.find(category => category.id === product.category);      

  return (
    <Table.Row key={product.id}>
      <Table.Cell>{product.name}</Table.Cell>
      <Table.Cell>{category.name}</Table.Cell>
      <Table.Cell>{product.brand}</Table.Cell>
      <Table.Cell>{product.model}</Table.Cell>
    </Table.Row>
  )
})

Итак, мы определили, что оба product из обратного вызова функции map и category из обратного вызова функции find должны быть определены, мы остались с возвращаемым значением функции find. array::find возвращает undefined, если ни один элемент не соответствует предикату и не найден в массиве. Вы должны соблюдать это.

productsData.products.map(product=>{
  category = categories.find(category => category.id === product.category);

  if (!category) return null;

  return(
    <Table.Row key={product.id}>
      <Table.Cell>{product.name}</Table.Cell>
      <Table.Cell>{category.name}</Table.Cell>
      <Table.Cell>{product.brand}</Table.Cell>
      <Table.Cell>{product.model}</Table.Cell>
    </Table.Row>
  )
})

null - это допустимый визуализируемый JSX, но сопоставление массива с нулевыми значениями может показаться странным

ПРИМЕЧАНИЕ: Это не исключает того факта, что может возникнуть внешняя проблема, из-за которой любой из перебираемых массивов по какой-то причине не определен, но это может означать, что у вас нет хороших значений пропов по умолчанию или ваши редукторы возвращают неопределенное значение начальные значения (или оба).