时间戳

首页 > 解决方案 > 反应组件中的问题

reactjs - 反应组件中的问题

问题描述

我在以下组件中遇到问题，似乎该组件未呈现，并且我在控制台中收到以下错误：“无法读取属性 'operationalHours' of null”。我不明白为什么 operationHours 它是空的。也许有人可以帮助我为这个问题提供一个可能的解决方案。这是组件：

import React, { useState, useEffect } from 'react';
import Search from 'client/components/ui/Search';
import { performSearchById } from 'client/actions/api/search';
import { get } from 'lodash';
import {
  SEARCH_STORE_NOT_CLOSED,
  SEARCH_STORE_OPEN_TEXT,
  SEARCH_STORE_CLOSED_TEXT
} from 'app/client/constants/values';

import DownArrow from 'components/UI/icons/DownArrow';

import styles from './styles.module.scss';

const StoreDetails = ({ storeInfo }) => {
  const [expanded, setIsExpanded] = useState(false);
  const [storeData, setStoreData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const storeId = storeInfo.store_id;
      const {
        data: {
          Location: {
            contactDetails: { phone },
            operationalHours
          }
        }
      } = await performSearchById(storeId);
      setStoreData({ phone, operationalHours });
    }
    fetchData();
  }, [storeInfo.store_id]);

  const infoText = expanded ? 'Hide details' : 'View details';

  function parseHours(hours) {
    const formattedHours = {};
    hours.forEach(dayObj => {
      const closed = get(dayObj, 'closed', '');
      const day = get(dayObj, 'day', '');
      if (closed === SEARCH_STORE_NOT_CLOSED) {
        const openTime = get(dayObj, 'openTime', '');
        const closeTime = get(dayObj, 'closeTime', '');
        if (openTime === null || closeTime === null) {
          formattedHours[day] = SEARCH_STORE_OPEN_TEXT;
        } else {
          formattedHours[day] = `${openTime}-${closeTime}`;
        }
      } else {
        formattedHours[day] = SEARCH_STORE_CLOSED_TEXT;
      }
    });
    return formattedHours;
  }

  const storeHours = storeData.operationalHours
    ? parseStoreHours(storeData.operationalHours)
    : '';

  return (
    <div className={styles.viewStoreDetails}>
      <span
        className={expanded ? styles.expanded : undefined}
        onClick={() => setIsExpanded(!expanded)}
      >
        <DownArrow />
      </span>
      <div>
        <span className={styles.viewStoreDetailsLabel}>{infoText}</span>
        <div>
          {expanded && (
            <Search
              phoneNumber={storeData.phone}
              storeHours={storeHours}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default StoreDetails;

标签： reactjs

解决方案

这是因为您正在设置storeData组件第一次渲染之后的值。storeData您的默认值为null.

它在这里中断：storeData.operationalHours因为null不是一个对象，因此不能拥有可以访问它的属性。

您可能应该将初始状态设置为更能代表您的实际状态：

const [storeData, setStoreData] = useState({}); // Or even add keys to the object.

还可以在这里阅读有关useEffect钩子及其运行时间的信息。似乎根本问题是对何时填充数据的误解。

推荐阅读