Javascript 尝试获取状态时出现React-TypeError

我是一个新手，想开始学习react。我目前正在开发一个TODO应用程序，但我得到一个TypeError:TODO为空

我的Redux开发工具中的状态显示正确，但我无法找出我遗漏了什么/做错了什么。当我试图用数据填充输入字段时，这在我的编辑页面上

这是我在Editodo中的代码：

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));

但我得到了这个错误：

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)

如果有人能帮我，我将不胜感激

---

提前感谢

原始问题中的屏幕截图错误指向您的

useffect

hook赋值

说明

：

快速修复方法是在检查

todo.description

之前对

todo

执行空检查，同样地，其他方法也可以避免出现

类型错误

：

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

以上内容应足以通过

TypeError

---

---

无论如何，除了修复空值之外，我个人会将

editto

组件分为两个组件：一个容器组件，其中

todo

可能是

null

，另一个表单组件，

todo

永远不会是

null

。基本上，容器在将

todo

传递给表单组件之前进行空检查。我认为处理空值会更干净、更安全。

您需要将其编辑到最小的复制情况，并包含错误消息的文本，而不是屏幕截图。尽管如此，第一行很可能是您的问题：如果todo为null或未定义，则对象解构将抛出，但由于您似乎没有向我们展示如何调用它，因此很难说清楚。您希望

getCurrentTodo

在

useffect

的其余部分执行之前更新

todo

，这似乎是一个问题。最有可能的是，您对

setFormData

的调用应该在另一个

useffect

中完成，该程序检查对

todo

的更改@JaredSmith我编辑了问题并试图使其更清楚。如果您需要更多详细信息，请询问。如何分解对象？正如我在Redux开发中看到的那样，它处于正确的状态tools@lula错误告诉您问题出在

EditTodo

组件中，但您没有向我们展示在代码中使用该组件的位置。正如我之前所说的，如果在传递道具时

todo

为null或未定义，那么每次都会出现该错误……顺便说一句，你说自己是新手。我不知道你是指React，还是一般的前端，还是编码周期。但如果这是最后两个问题之一，那么这是一个需要同时解决的问题。您拥有最先进的Javascript、React、钩子、axios、模块等。即使您设法让它工作起来，您也无法理解它是如何工作的、为什么工作的，更重要的是，您无法理解它发生故障的原因。如果您刚刚接触React和/或当前的JS，那么您可能可以实现这一点。

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

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]);

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