【发布时间】:2018-10-12 16:40:40
【问题描述】:
我正在使用 Reactjs 构建一个 TODO 应用程序,在我的 components 文件夹中,我有一个名为 TaskList 的类,其中包含用于迭代任务的代码:
import React, { Component } from 'react';
import {connect} from 'react-redux';
class TaskList extends Component {
render(){
return(
<table>
<thead>
<tr>
<th>Tasks</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{this.props.tasks.map((task,index) => <Task key={index} task={task} />)}
</tbody>
</table>
);
}
}
function MapStateToProps(state){
return{
tasks:state.tasks
}
}
export default connect (MapStateToProps)(TaskList);
此外,在组件文件夹中,我有一个名为 Task 的类,用于我的 TaskList 类:
任务:
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {DeleteTask} from '../../redux/actions';
class Task extends Component {
render(){
return(
<tr>
<td>
{this.props.task}
</td>
<td>
<button onClick = {() => this.props.DeleteTask(this.props.id)}>Delete</button>
</td>
</tr>
);
}
}
function MapDispatchToProps(dispatch){
return bindActionCreators({DeleteTask},dispatch);
}
export default connect (() => {return {};},MapDispatchToProps)(Task);
我的问题是我有错误任务未定义,因为我没有将任务导入任务列表。在我已经尝试过的 TaskList 上:
import Task from './components/task';
import Task from 'task'; //as it's on the same directory
import Task from './task';
而且没有任何效果。对此有何想法?
【问题讨论】:
-
我自己解决了错误,导入应该是 Import Task from '../task'
-
将解决方案放在答案上并接受它。为了将来参考,导入写成
import Thing from "module/path",其中Thing 必须匹配模块中的export default Thing语句。 -
我也使用
import { Task} from '.';让它工作。
标签: reactjs ecmascript-6 frontend