@AndersonGsr1989

Потеря this в mapDispatchToProps. Почему dispatch не имеет его?

Недавно начал углубляться в React/Redux и столкнулся с проблемой. Сделал connect всё как в документации, но у меня теряется this в методе dispatch. При этом mapStateToProps отрабатывает корректно.
Вот код
import React from "react"
import { connect } from "react-redux"
class Interface extends React.Component{
    constructor(props){
        debugger
        super(props)
        this.props=props;
        console.log(props);
        this.elements=null;
    }

    render(){
        if(this.props.todo.length>0){
            this.elements=this.props.todo.map((value)=>{
            return <li key={value}>{value}</li>
            })
        }
        debugger
        return(
            <div>
                <div><p>add</p><input type="text"
                ref={this.props.add}></input>
                <button onClick={this.props.foo}>add</button></div>
                <div><p>remove</p><input type="text" ref={this.props.remove}></input></div>
                <h1>Todo list</h1>
                <ul>{this.elements}</ul>
            </div>
        )
    }
}
function mapStateToProps(state) {
    return{
        add:React.createRef(),
        remove:React.createRef(),
        todo:state.todo,
    }
}
function mapDispatchToProps(dispatch) {
    return{
        foo:()=>{
            dispatch({type:"ADD",data:"data"})
        }
    }
}
let Cover = connect(mapStateToProps,mapDispatchToProps)(Interface)
export default Cover

Ошибка пробрасывается здесь
dispatch(action){
        switch (action.type) {
            case ADD:{
                debugger
                this.state.todo=todoreducer(this.state.todo,action.data)
                this.rerender()
                break;
            }
            case REMOVE:{
                this.state.done.push(action.data)
                this.state.todo=donereducer(this.state.todo,action.data)
                this.rerender()
                break;
            }
        
            default:
                break;
        }
    }

Ну и её код
5fc53a6d74fbd064475868.png
Как это решить? Что я упускаю?
  • Вопрос задан
  • 32 просмотра
Решения вопроса 1
Krasnodar_etc
@Krasnodar_etc
little front
Блин, я даже не знаю, что сказать... Давайте по-порядку
1) По каким материалам вы учите? Они точно не устарели? Меня очень смущает ваш constructor, потому что пропсы и так автоматически записываются в this.props. Получается, что вместо всего метода можно написать просто
class Interface extends React.Component{
  elements = null;
...
}


2) Тут я могу быть не прав, но, насколько я помню React.createRef можно использовать только внутри классового компонента. Функция mapStateToProps никак не связана с вашим классом Interface, у неё совсем другой контекст

3) Теперь непосредственно о вашей проблеме. Редьюсер, в котором находится switch/case никак не связан с вашим классом Interface. Советую ещё раз перечитать в документации как работает this. У вас он указывает на функцию, в которой вы к нему обращаетесь. Не могу подсказать точнее, потому что меня немного вводит в ступор строка dispatch(action){

Могу сказать только три вещи:
- Никогда не обновляйте стейт вот так: this.state.SOME_FIELD = ... . Используйте для этого только this.setState({ SOME_FIELD: ... }) . Иначе компонент может не отрисовать новые данные
- Редьюсер и redux никак не связаны со стейтом и вашими классами. У них абсолютно разный контекст выполнения. this в Реакте работает точно так же, как и должен работать в JS-e
- Очень советую пройти официальный туториал по реакту - ссылка
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы