Блог

Я создаю свое первое интерфейсное приложение ReactJS и сталкиваюсь с проблемой. Когда я пытаюсь вызвать свою функцию setState (или любую другую функцию, если на то пошло) с помощью this . перед ним внутри блока if я получаю сообщение об ошибке.

Необработанное отклонение (TypeError): не удается прочитать свойство ‘setState’ неопределенного значения

Когда я вызываю функции внутри моего didComponentMount (), все в порядке, поэтому я думаю, что проблема в блоке if. Я пробовал несколько решений по разным вопросам, но ни в одном из них нет блока if, поэтому он не работает для меня.

Функция, которая выдает ошибку:

 getFilteredTrades() {
        if(document.getElementById("switch").checked){
            fetch("http://localhost:8080/trades/filter?plaform=NintendoSwitch").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else if (document.getElementById("playstation").checked) {
            fetch("http://localhost:8080/trades/filter?platform=PlayStation").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else if (document.getElementById("xbox").checked) {
            fetch("http://localhost:8080/trades/filter?platform=XBox").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else if (document.getElementById("pc").checked) {
            fetch("http://localhost:8080/trades/filter?platform=PC").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else {
            alert("No filter is selected, so all trades will be displayed.")
            this.getAllTrades();
        }
    }
  

Как setState, так и getAllTrades будут выдавать здесь ошибки.

getAllTrades():

 getAllTrades() {
        fetch("http://localhost:8080/trades/all").then(rse => rse.json()).then(
            result => {
                this.setState({trades: result});
            }
        )
    }
  

конструктор:

 constructor(props){
        super(props);

        this.state = {
            trades: []
        }
    }

  

didComponentMount, где getAllTrades РАБОТАЕТ:

 componentDidMount() {
        this.getAllTrades();
    }
  

Кто-нибудь знает решение этой проблемы? Заранее спасибо.

В ваших getFilteredTrades getAllTrades функциях и this ссылается на сами функции, а не на объект, и у этих функций нет члена setState .

Вы можете решить проблему двумя способами:

1. Объявляя их как функции со стрелками, которые не связываются this с помощью записи getFilteredTrades = () => { ... } и getAllTrades = () => { ... } .
2. Привяжите this ключевое слово функций к объекту класса, написав this.getFilteredTrades = this.getFilteredTrades.bind(this) and this.getAllTrades = this.getAllTrades.bind(this) в вашем конструкторе.

Кажется, в какой-то момент вы теряете контекст. Попробуйте связать свои методы или сделать их функциями со стрелками:

 getAllTrades=()=>{...}
  

Если это не поможет, попробуйте объединить его с self = этот трюк, который был предложен выше