Блог

Попытка отобразить отфильтрованную таблицу, но безуспешно, см. Ниже.

Продолжайте получать неопределенную ошибку при чтении карты, похоже, не можете понять, почему колледжи не передаются при вызове filteredColleges.map(college)

Может ли это быть из-за того, что я вызываю <Table/> компонент внутри своего App.js и забыл основной шаг?

App.js выглядит так:

 return (  <div className="App">  <header className="App-header">  <h1>Partners</h1>  <Table/>  </header>  </div>  ); }  

Если бы кто-нибудь мог помочь, я был бы очень, очень благодарен. Заранее спасибо!

 import React , {Component } from 'react'  export default class Table extends Component {  // Display API data - componentDidMount - pull specific elements - DONE // Create table displaying API data // Create Search bar // Create drop down list for prefix // Style Ofsted Rating column   constructor(props) {  super(props);  this.state = {  error: null,  isLoaded: false,  colleges: [],  searchByName: ""  };  this.handleChange = this.handleChange.bind(this);  }   handleChange(event) {  this.setState({ searchByName: event.target.value });  }   componentDidMount() {  fetch(`https://collegesapi/data.json`)  .then(res => res.json())  .then(  (result) => {  this.setState({  isLoaded: true,  colleges: result.getColleges  });  },  (error) => {  this.setState({  isLoaded: true,  error  });  }  )  }   renderRow(college) {  return (  <tr key={college.id}>  <td>{college.name}</td>  <td>{college.groupPrefix}</td>  <td>  {college.logo amp;amp; (  <img className="w-full" src={college.logo} alt={college.name} />  )}   </td>  <td>{college.ofstedRating}</td>  </tr>  )  }   render() {   const filterColleges = (colleges, query) => {  if(!query) {  return colleges;  }   return colleges.filter((college) => {  const collegeName = college.name.toLowerCase();  return collegeName.includes(query);   });  };   const filteredColleges = filterColleges(  this.props.colleges,  this.state.searchByName  );   const { error, isLoaded, colleges } = this.state;   if (error) {  return <div>Error: {error.message}</div>  } else if (!isLoaded) {  return <div>Loading...</div>;  } else {  return (   <div>   <table className="table-fixed border-collapse">  <thead>  <tr>  <input  type="text"  placeholder="Search partners"  onChange={this.handleChange}  />  </tr>  <tr>  <th className="w-1/12">Partner</th>  <th className="w-1/12">Prefix</th>  <th className="w-1/12">Logo</th>  <th className="w-1/12">Ofsted Rating</th>  </tr>  </thead>  <tbody>{filteredColleges.map((college) => this.renderRow(college))}</tbody>  </table>  </div>  )  }  } }   

Вы ссылаетесь на этот.реквизит.колледжей при отправке в функцию «filtercolege» .:

 const filteredColleges = filterColleges(  this.props.colleges,  this.state.searchByName );  

Вместо этого, поскольку вы устанавливаете его в состояниях при получении ответа API, вам следует соответствующим образом обратиться:

 const filteredColleges = filterColleges(  this.state.colleges,  this.state.searchByName );  

Кроме того, всегда полезно обрабатывать ответы с ошибками или пустыми ответами, например, если ваш API не возвращает даже пустой массив, то этот код все равно выдаст ту же ошибку. Таким образом, вы можете добавить нулевые проверки объединения (??) и назначить пустой массив в этих случаях, как показано ниже:

 this.setState({  isLoaded: true,  colleges: result?.getColleges ?? [],  });  

Надеюсь, это поможет!