Question

我是一个新手，试图开始反应。我目前正在开发TODO应用，但遇到TypeError：Todo为空。

我的Redux开发工具中的状态正确显示，但是我无法弄清丢失/做错了什么。当我尝试用数据填充输入字段时，这在我的“编辑”页面上。

这是我在EditTodo中的代码：

const EditTodo = ({ todo: { todo, loading }, createTodo, getCurrentTodo, match, history }) => {
const [formData, setFormData] = useState({
    description: '',
    responsible: '',
    priority: '',
    completed: false

});

useEffect(() => {
    getCurrentTodo(match.params.id);
    setFormData({
        description: loading || !todo.description ? '' : todo.description,
        responsible: loading || !todo.responsible ? '' : todo.responsible,
        priority: loading || !todo.priority ? '' : todo.priority
    });
}, [getCurrentTodo]);

const {
    description,
    responsible,
    priority,
    completed
} = formData;

const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });

const onSubmit = e => {
    e.preventDefault();
    createTodo(formData, history, true);
};
return (
    <Fragment>
        /*CODE HERE*/
    </Fragment>
)
}

EditTodo.propTypes = {
    createTodo: PropTypes.func.isRequired,
    getCurrentTodo: PropTypes.func.isRequired,
    todo: PropTypes.object.isRequired

};

const mapStateToProps = state => ({
    todo: state.todo
});

export default connect(mapStateToProps, { createTodo, getCurrentTodo })(withRouter(EditTodo));

这是在我的Todos页面上调用的：

 <Link to={`/edit/${todo._id}`}><i className="fa fa-edit" id="edit"></i></Link>
...
Todos.propTypes = {
getTodos: PropTypes.func.isRequired,
getCurrentTodo: PropTypes.func.isRequired,
todo: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    todo: state.todo
});

export default connect(mapStateToProps, { getTodos, getCurrentTodo   })(Todos);

这是我的getCurrentTodo动作：

export const getCurrentTodo = id => async dispatch => {
try {
    const res = await axios.get(`/api/todo/${id}`);

    dispatch({
        type: GET_TODO,
        payload: res.data
    });
} catch (err) {
    dispatch({
        type: TODO_ERROR,
        payload: { msg: err.response.statusText, status: err.response.status }
    });
}
};

但是我得到这个错误：

The above error occurred in the <EditTodo> component:
in EditTodo (created by Context.Consumer)
in withRouter(EditTodo) (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in Route (at App.js:25)
in div (at App.js:21)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:19)
in Provider (at App.js:18)
in App (at src/index.js:6)

和

TypeError: todo is null

如果有人可以帮助我，我将不胜感激。

预先感谢

Answer 1

您原始问题中的屏幕截图错误指出您为useEffect分配了description钩子：

https://i.stack.imgur.com/XhUAF.png

useEffect(() => {
    getCurrentTodo(match.params.id);
    setFormData({
        description: loading || !todo.description ? '' : todo.description,
        responsible: loading || !todo.responsible ? '' : todo.responsible,
        priority: loading || !todo.priority ? '' : todo.priority
    });
}, [getCurrentTodo]);

快速解决方案是在检查todo之前先对todo.description进行空检查，类似的是其他检查以避免TypeError：

loading || todo === null || !todo.description ? '' : todo.description,

以上内容应该足以克服TypeError。

无论如何，除了固定空值之外，我还亲自将EditTodo组件分为两个组件：todo可能是null的容器组件和{{ 1}}永远不会是todo。基本上，容器在将null传递到其表单组件之前会进行空检查。我认为这将更干净，更安全地处理null。

尝试获取状态时反应TypeError

1 个答案: