Добрый вечер, получаю ошибку:
You must pass a component to the function returned by connect. Instead received undefined
Компонент представление список проектов:
export class ListProject extends Component {
constructor(props) {
super(props);
this.state = {
isOpen: false
};
this.addProject = this.addProject.bind(this);
this.showModal = this.showModal.bind(this);
}
componentWillMount() {
this.props.loadProjects(window.localStorage.getItem("userId"));
}
addProject() {
this.setState({isOpen: false});
let typeProject = document.getElementsByClassName("selected")[0].textContent.toLowerCase();
this.props.createProject(typeProject, this.props.numberProject);
};
showModal() {
if (this.state.isOpen === false) {
this.setState({isOpen: true});
} else {
this.setState({isOpen: false});
}
}
render() {
return (
<ul>
{
this.props.projects.map(function(item){
return <ProjectContainer
key={uniqueKey(item.name)}
name={item.name}
type={item.projecttype}
projectId={item.id}
/>
})
}
<button id="project_add" onClick={this.showModal}>
<span>+ ADD PROJECT</span>
</button>
<ModalAddProject
show={this.state.isOpen}
onClose={this.addProject}
/>
</ul>
);
}
}
Компонент контейнер один проект
import { connect } from "react-redux";
import { Project } from "../../Components/Customer/Project";
const ProjectContainer = connect(
state => ({
sequences: state.customer.sequences,
}),
dispatch => ({
}))(Project);
export default ProjectContainer;
Компонент представление одного проекта
export class Project extends Component {
constructor(props) {
super(props);
this.state = {
isDescriptionProject: false,
isShowSequence: false
};
this.showDescriptionProject = this.showDescriptionProject.bind(this);
this.showSequence = this.showSequence.bind(this);
}
showDescriptionProject() {
if (this.state.isDescriptionProject === false) {
this.setState({isDescriptionProject: true});
} else {
this.setState({isDescriptionProject: false});
}
}
showSequence() {
if (this.state.isShowSequence === false) {
this.setState({isShowSequence: true});
} else {
this.setState({isShowSequence: false});
}
}
render() {
return (
<div>
<div className="project">
<div onDoubleClick={this.showDescriptionProject}>
{this.props.name} {this.props.type}
</div>
<span
className={this.state.isShowSequence ? "fa fa-minus":"fa fa-plus"}
onClick={this.showSequence}
>
</span>
</div>
<div className={ this.state.isShowSequence ? "container_sequence":""}>
{ this.state.isShowSequence ? <SequencesContainer projectId={this.props.projectId} />:""}
</div>
<div className={this.state.isDescriptionProject ? "container_description":""}>
{this.state.isDescriptionProject ? <DescriptionElement head={this.props.name} />: null}
</div>
</div>
);
}
}
Проблема как я понимаю в контейнере ProjectContainer. Можно ли проходить циклом по массиву и создавать список отдельных контейнеров?
Простой
