reactjs - TypeError：无法解构“（0，_reactRedux.useSelector）（...）”的属性“reintroduceHouseStatus”，因为它未定义

Question

TypeError：无法解构“（0，_reactRedux.useSelector）（...）”的属性“reintroduceHouseStatus”，因为它是未定义的。

正如您在上面的屏幕截图中看到的，我唯一失败的是通过yarn test.

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { History } from 'history';
import Modal from 'react-modal';

import { House, User } from '../../api';
import { HouseCreateForm, HouseInviteModal, HouseManageModal } from '../../components';
import { houseStatus } from '../../constants/constants';
import { userActions } from '../../store/actions/index';
import { OrangeGlobalState } from '../../store/state';

interface Props {
  history: History;
  house: House;
  me: User;
}

function HousePage(props: Props) {
  const [houses, setHouses] = useState<[House]>();
  const [houseToBeInvited, setHouseToBeInvited] = useState<House>();
  const { getMeStatus, me } = useSelector((state: OrangeGlobalState) => state.user);
  const { reintroduceHouseStatus, renameHouseStatus } = useSelector((
    state: OrangeGlobalState,
  ) => state.house);

当我尝试以下代码时

console.log('reintroduceHouseStatus : ', reintroduceHouseStatus);
console.log('renameHouseStatus : ', renameHouseStatus);

当我执行与状态相关的功能时，控制台返回两个状态。

我不知道为什么getMeStatus没有问题但是reintrudoceHouseStatus有renameHouseStatus。（已经检查state: OrangeGlobalState了哪两个状态。reactRedux的版本有问题吗？我很好奇是否有人和我有同样的问题。

谢谢。

---

以下代码来自src/App.test.tsx

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';

import App from './App';
import { getMockStore, history } from './tests/mocks';

const mockStore = getMockStore({
  user: {
    me: {},
  },
  necessity: {
    necessities: [],
  },
});

test('renders app with mock store', () => {
  const app = render(
    <Provider store={mockStore}>
      <App history={history} />
    </Provider>,
  );
  expect(app.container.firstChild).toHaveClass('App');
});

标签： reactjstypescriptreact-redux

Answer 1

如果您可以提供一些测试代码，那就太好了，但是我自己也遇到了这个问题，我可以猜测一下。

在测试文件中，如果您使用了该render方法（或任何类似的方法，render来自testing-library），您可能已经为组件创建了一个包装器，使用Provider并使用createStore. 在这里，您需要传递状态的减速器和默认状态（在您的情况下，设置state.house为某些东西）

<Provider store={createStore(houseReducer, { house: defaultState })}>
    <HousePage />
</Provider>