Реагировать: Как показать сообщение, если нет записей

Question

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

код

<code>        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}

Изменить ссылку ) } } ReactDOM.render (, document.querySelector ('div # my-example'))

Answer 1

Вы можете проверить, когда вы получите данные обратно и установить ошибку, если данных нет:

  getData(){
    const {Item,skip}=this.state;
    axios.get(`http://localhost:8001/parties?filter[limit]=${Item}&&filter[skip]=${skip}`)
    .then(response=>{
      console.log(response.data);
      if (!response.data.length) {
        this.setState({noData: true}) 
      } else {
        this.setState({
          data:response.data, noData: false
        })
      }
    })
  }

Тогда в вашей функции рендеринга:

render() {
  if (this.state.noData) {
    return <p>No Data was returned!</p>;
  }
  ...

Answer 2

Вы можете проверить данные перед рендерингом компонента и вернуть другой компонент, если у вас его нет. Использование выражений, подобных этому примеру ‘’ ’{doIHaveData? : } ‘’ ’

Где у Component1 есть ваша функциональность, а у Component2 возвращаются сообщения или загрузчик, который вы хотите.

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

Когда вы проверяете пустой массив, вы можете проверить тип и длину массива. Я бы лично сделал что-то вроде

 {Array.isArray(array) && array.length === 0 ? <component1/> : <component2/>} 

Answer 3

Вы можете добавить свое сообщение как другое условие, где бы вы ни хотели:

{this.state.filtered.length === 0 && (
  <div>Your Message</div>
)}

Или, если вы пытаетесь добавить сообщение, которое ничего не дает, тогда:

{this.state.allData.length === 0 && (
  <div>Your Message</div>
)}

Answer 4

Вы можете использовать условный рендеринг!

render(){
const filteredItems = this.getDataItems(this.state.filtered);
const dataItems = this.getDataItems(this.state.data);

if(dataItems){
return(
 <div>Your Message</div>
)
}
else{
//Your normal code

}
}

Answer 5

Я думаю, что хорошим способом было бы заставить ваш сервер возвращать сообщение об ошибке, когда нет записей для отображения.Вы можете использовать .catch после вашей функции axios.get().then(), чтобы увидеть, есть ли какие-либо ошибки, возвращаемые серверной частью, и затем отобразить ее пользователю.

Посмотрите: Какой правильный код ответа REST длядействительный запрос, но пустые данные?