我有一个ServicesContainer,它查找servicesReducer以呈现ServiceCards列表。
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { ServiceCard } from '../../components'
export class ServicesContainer extends Component {
constructor(props) {
super(props);
this.state = {
services: props.state.servicesReducer.services
}
}
onFormSubmit(e, user) {
e.preventDefault();
this.props.searchUser(user)
}
render() {
const services = this.state.services;
return (
<div className='services-container'>
<ul>
{ services.map(service =>
<ServiceCard
key={ service.name }
name={ service.name }
description={ service.description }
admins={ service.admins }
group={ service.group } />) }
</ul>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
state
}
}
const ServicesListContainer = ServicesContainer;
export default connect(mapStateToProps, null)(ServicesListContainer)
这里的一切都运作良好,但测试不喜欢我传入的状态:
import React from 'react'
import * as enzyme from 'enzyme'
import toJson from 'enzyme-to-json'
import { ServicesContainer } from './ServicesContainer'
import ServiceCard from '../../components/Services/serviceCard'
import { initialServicesState } from '../../reducers/Services/servicesReducer'
const state = {
servicesReducer: {
services: initialServicesState
}
}
const servicesContainer = enzyme.shallow(<ServicesContainer state={ state }/>);
describe('<ServicesContainer /> component', () => {
it('should render', () => {
const tree = toJson(servicesContainer);
expect(tree).toMatchSnapshot();
});
});
export const initialServicesState = {
services: [
{
_id: _id,
name: "GeoStore",
description: "Manage store delivery zones",
admins: [ "Chuck Roe", "Steve Wonder" ],
group: "Black Flag"
},
{
_id: _id2,
name: "Rights Manager UI",
description: "Manage all internal applications and services",
admins: [ "Chuck Roe", "Steve Wonder" ],
group: "Black Flag"
}
]
}
import React, { Component } from 'react'
export default class ServiceCard extends React.Component {
constructor(props) {
super(props);
}
render () {
const name = this.props.name;
const description = this.props.description;
const admins = this.props.admins;
const group = this.props.group;
return (
<section className="service-card">
<h4>{ name }</h4>
<p>{ description }</p>
<em>{ group }</em>
<div className="services-admins">
<ul>
<li>
{ admins.map(admin => admin) }
</li>
</ul>
</div>
</section>
)
}
}
这就是Redux State在ServicesContainer中的样子:
答案 0 :(得分:1)
我需要将.services
数组附加到initialServicesState
。那就是缺少的东西。
const state = {
servicesReducer: {
services: initialServicesState.services
}
}
答案 1 :(得分:1)
问题在于你正在使用属性&#34; services&#34;来构建道具。复制。
以下是相关部分:
在组件上,您从传递的props
获取state.serviceReducer.servicesthis.state = {
services: props.state.servicesReducer.services
}
道具在这里传递,服务从导入中获取值:
import { initialServicesState } from '../../reducers/Services/servicesReducer'
const state = {
servicesReducer: {
services: initialServicesState
}
}
const servicesContainer = enzyme.shallow(<ServicesContainer state={ state }/>);
导入来自此导出,该导出是具有服务属性的对象。
export const initialServicesState = {
services: [
{
_id: _id,
name: "GeoStore",
所以,您必须将导出更改为
export const initialServicesState =
[
{
_id: _id,
name: "GeoStore",
或道具建设
const state = {
servicesReducer: {
services: initialServicesState.services
}
}
正如你在答案中已经想到的那样。