ReactJS: TypeError: Невозможно прочитать свойство 'include' из неопределенного - PullRequest
Новая
       7

ReactJS: TypeError: Невозможно прочитать свойство 'include' из неопределенного

0 голосов
/ 28 апреля 2020

Я хочу заранее извиниться, потому что я очень новичок в использовании React Framework и если мой код написан не чисто. В настоящее время я создаю --Filter By-- в моем коде с помощью селектора для моих JSON данных из API. Но я продолжаю получать такого рода ошибки в моем коде. Я имел дело с этим в течение последних 2 дней, и мне не удалось это исправить.

Мой код:

селектор. js

import { createSelector } from "reselect";

const getItems = (state) => [state.shop];
const getValue = (state) => state.category;

export const getFilteredItems = createSelector(
  [getItems, getValue],
  (items, value) => {
    items =
      value == "ALL"
        ? items
        : items.filter((item) => item.productIdentifier.includes(value));
  }
);

catalog.jsx -> компонент 

import React, { Component } from "react";
import "./CatalogStyle.css";
import { addToCart, getItems } from "../../actions/projectActions";
import { getFilteredItems } from "../../selectors/selector";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Link } from "react-router-dom";

class Catalog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      category: "ALL",
    };
  }

  componentDidMount() {
    this.props.getItems();
  }

  filterByCategory = (e) => {
    let filterValue = e.target.value;
    this.setState({ category: filterValue });
  };

  _addToCart = (id) => {
    this.props.addToCart(id);
  };

  render() {
    const { items } = this.props.items;

    return (
      <React.Fragment>
        <div>
          <label>
            Filter By:
            <select
              value={this.state.value}
              onChange={(e) => {
                this.filterByCategory(e);
              }}
            >
              <option value="ALL">All</option>
              <option value="FD">Food</option>
              <option value="CL">Clothes</option>
            </select>
          </label>
        </div>
        <div className="table">
          {items.map((item) => (
            <div className="card" key={item.id}>
              <img
                className="imageProperty"
                src={require("../layout/images/buat_gambaran_product/u138.jpg")}
              ></img>
              <h3 className="productName">{item.productName}</h3>
              <p className="PriceAmmount">{item.productPrice}</p>
              <p>{item.productDescription}</p>
              <Link to="/checkout">
                <button
                  onClick={() => {
                    this._addToCart(item.id);
                  }}
                >
                  add
                </button>
              </Link>
            </div>
          ))}
        </div>
      </React.Fragment>
    );
  }
}

Catalog.propTypes = {
  getItems: PropTypes.func.isRequired,
  items: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  items: getFilteredItems(state),
});

const mapDispatchToProps = (dispatch) => {
  return {
    addToCart: (id) => {
      dispatch(addToCart(id));
    },
    getItems: () => {
      dispatch(getItems());
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Catalog);

мой редуктор. js для получения всех предметов 

case GET_ITEMS:
      return {
        ...state,
        items: action.payload,
      };

мой проект Действия. js для getItems 

export const getItems = () => async (dispatch) => {
  const res = await axios.get("http://localhost:8080/api/project/all");
  dispatch({
    type: GET_ITEMS,
    payload: res.data,
  });
};

JSON

shop : {
    items : [
        0{
          "id": 1,
          "productName": "shoes",
          "productIdentifier": "CL001",
          "productDescription": "adidas kicks boir",
          "productPrice": 2000,
          "productStock": 200,
          "created_at": "2020-51-28",
          "updated_at": null
         }
        1{
          "id": 2,
          "productName": "burger",
          "productIdentifier": "FD001",
          "productDescription": "charsiu berger",
          "productPrice": 2000,
          "productStock": 200,
          "created_at": "2020-51-28",
          "updated_at": null
         }
      ],
    }

PS. пожалуйста, не возражайте created_at и updated_at.

журналы ошибок 

Uncaught TypeError: Cannot read property 'includes' of undefined
    at selector.js:9
    at Array.filter (<anonymous>)
    at selector.js:9
    at index.js:69
    at index.js:30
    at index.js:82
    at index.js:30
    at Function.mapStateToProps [as mapToProps] (Catalog.jsx:83)
    at mapToPropsProxy (wrapMapToProps.js:41)
    at Function.detectFactoryAndVerify (wrapMapToProps.js:50)
    at mapToPropsProxy (wrapMapToProps.js:41)
    at handleFirstCall (selectorFactory.js:22)
    at pureFinalPropsSelector (selectorFactory.js:63)
    at connectAdvanced.js:208
    at mountMemo (react-dom.development.js:16875)
    at Object.useMemo (react-dom.development.js:17187)
    at useMemo (react.development.js:1614)
    at ConnectFunction (connectAdvanced.js:193)
    at renderWithHooks (react-dom.development.js:16317)
    at updateFunctionComponent (react-dom.development.js:18363)
    at updateSimpleMemoComponent (react-dom.development.js:18303)
    at updateMemoComponent (react-dom.development.js:18208)
    at beginWork$1 (react-dom.development.js:20234)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at beginWork$$1 (react-dom.development.js:25768)
    at performUnitOfWork (react-dom.development.js:24685)
    at workLoopSync (react-dom.development.js:24658)
    at performSyncWorkOnRoot (react-dom.development.js:24247)
    at react-dom.development.js:12285
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12231)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12280)
    at flushSyncCallbackQueue (react-dom.development.js:12268)
    at discreteUpdates$1 (react-dom.development.js:24401)
    at discreteUpdates (react-dom.development.js:1439)
    at dispatchDiscreteEvent (react-dom.development.js:5914)

Заранее спасибо всем, кто мог бы помочь мне.

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Добро пожаловать в стек переполнения и в технологии React.

Ваши getItems объекты имеют тип массива, поэтому вам нужно l oop через переменную.

Таким образом, из-за непосредственного применения этого способа item.productIdentifier.includes(value)) он выдаст ошибку Undefined, как в item, во-вторых, это индекс массива, а затем ключ объекта productIdentifier определены.

Просмотрите фрагмент кода ниже. 

var items = [
        {
          "id": 1,
          "productName": "shoes",
          "productIdentifier": "CL001",
          "productDescription": "adidas kicks boir",
          "productPrice": 2000,
          "productStock": 200,
          "created_at": "2020-51-28",
          "updated_at": null
         },
        {
          "id": 2,
          "productName": "burger",
          "productIdentifier": "FD001",
          "productDescription": "charsiu berger",
          "productPrice": 2000,
          "productStock": 200,
          "created_at": "2020-51-28",
          "updated_at": null
         }
      ]
console.log(items)

items.map((item) => {
  let prodIdentifier = item.productIdentifier.includes('FD001')
  console.log(prodIdentifier)
})
0 голосов
/ 28 апреля 2020

Проблема в том, что в массиве items у вас нет объектов со свойством productIdentifier, или, может быть, у вас есть объекты без этого реквизита. Это вызывает ошибку:

селектор. js

import { createSelector } from "reselect";

const getItems = (state) => [state.shop];
const getValue = (state) => state.category;

export const getFilteredItems = createSelector(
  [getItems, getValue],
  (items, value) => {
    items =
      value == "ALL"
        ? items
        : items.filter((item) => item.productIdentifier.includes(value)); //<== this
  }
);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...