Реагируйте TypeError при попытке получить состояние

Question

Я новичок ie, пытаясь начать реагировать. В настоящее время я занимаюсь разработкой приложения TODO, но получаю ошибку TypeError: Todo имеет значение null.

Состояние в моих инструментах разработки 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 на 2 компонента: компонент контейнера, где todo может быть null, и компонент формы, где todo никогда не будет null. По сути, контейнер выполняет нулевые проверки перед передачей todo своему компоненту формы. Я думаю, что это будет чище и безопаснее обращаться с нулями.