Me encontré con este error al intentar ejecutar mi código React y veo que es un error común, pero después de mirar las preguntas de otras personas, todavía tengo problemas para solucionarlo. Todavía soy nuevo en React, así que estoy un poco perdido. Lo que se supone que debe hacer el código es tomar un archivo JSON y mostrarlo como una tabla y luego se supone que el botón lo ordena por apellido y vuelve a mostrar la tabla.
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> ); } }Ha definido sort para que sea una variable local dentro de render , pero en todos los lugares donde intenta acceder a él, lo está tratando como si fuera un miembro de la clase. Entonces, en lugar de estructurarlo así:
class PaientTable extends React.Component { // ... render() { function sort () { // ... } // ... } }Hacer esto:
class PaientTable extends React.Component { // ... sort() { // ... } render() { // ... } }