Блог

Главная - Вопросы по программированию - Ошибка типа: Не удается прочитать свойство «привязка» неопределенного, я не могу понять, что это значит. Реагировать js

Ошибка типа: Не удается прочитать свойство «привязка» неопределенного, я не могу понять, что это значит. Реагировать js

#javascript #reactjs #react-native

Вопрос:

Я столкнулся с этой ошибкой при попытке запустить свой код реакции и увидел, что это обычная ошибка, но после рассмотрения вопросов других людей у меня все еще возникают проблемы с тем, как это исправить. Я все еще новичок в реагировании, поэтому я как бы потерялся. Предполагается, что код должен взять файл JSON и отобразить его в виде таблицы, а затем кнопка должна отсортировать его по фамилии и повторно отобразить таблицу.

 import data from './data.json' //Imports the JSON from local file, can be changed later to pull from api
import {Button, View} from 'react-native';

export default function App() {

    return (
       <PaientTable/>
        
      );
}





class PaientTable extends React.Component { 
        

    constructor(props) {
        super(props);
        
        this.state = { counter: 0 };
       // this.sort = this.sort.bind(this);
      }
    
    
    render(){

        

       function sort (){ 
            return this.setState( 
  
              data.sort((a, b) => {//sorts by name
                  if (a.lName < b.lName) {
                    return -1;
                  }
                  if (a.lName > b.lName) {
                    return 1;
                  }
                  return 0;
                })
            );
        }
    return (

        
        
<table>
        <caption>Paients</caption>
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>
            <button type="button" onClick={() => this.sort.bind(this)}> 
              Last Name
            </button>
          </th>
            
          </tr>
        </thead>
        <tbody>
          {data.map(paient => (
            <tr>
              <td>{paient.id}</td>
              <td>{paient.fName}</td>
              <td>{paient.lName}</td>
            </tr>
          ))}
        </tbody>
      </table>
        
        
    
    );
          }
  }

Комментарии:

1. Зачем нужно использовать привязку? Разве вы не можете вызвать метод напрямую?

2. Там происходит несколько вещей. Прямо сейчас ваша sort функция находится внутри render функции. Вынеси это наружу. Далее вам нужно только «привязать this » свой конструктор. Раскомментируйте строку, которая у вас есть в конструкторе. Наконец, поскольку вам не нужно привязываться внутри render функции, измените значение кнопки onClick на onClick={this.sort} . Здесь есть дополнительная информация о привязке this к событиям, таким как события изменений, и о том, почему это необходимо: reactjs.org/docs/handling-events.html

3. Да, здесь куча проблем, самая большая, вероятно, связана с возвратом вызова setState внутри вашей функции сортировки. В любом случае, я исправил ваш код: codesandbox.io/s/brave-hertz-8lefg?file=/src/App.js

Ответ №1:

Вы определили sort , что это локальная переменная внутри render , но во всех местах, где вы пытаетесь получить к ней доступ, вы обращаетесь с ней так, как будто она является членом класса. Поэтому вместо того, чтобы структурировать это так:

 class PaientTable extends React.Component { 
 // ...
 render() {
    function sort () {
       // ...
    }
    // ...
 }
}

Сделай это:

 class PaientTable extends React.Component { 
  // ...
  sort() {
    // ...
  }

  render() {
    // ...
  }
}
Метки: , ,