React приложение не будет обновлять

Я делаю приложение для работы с React JS и Airtable, которое имеет удобный API для управления данными. Я новичок в React, и у меня ограниченный опыт работы с JS и API, но я выяснил большинство вещей, которые мне нужно сделать.

Мой вопрос в основном основан на React, так как я не могу заставить мое приложение автоматически обновляться. Я читал о жизненных циклах React и использовании this.setState() запланировать обновление, но я что-то упускаю.

Вот урезанная версия, где я пытаюсь удалить элемент.

class App extends React.Component { 
  constructor(props) {
    super(props);
    this.state = {
      records: []
    };

    this.fetchAirtable = this.fetchAirtable.bind(this);
    this.deleteItem = this.deleteItem.bind(props);
    this.setState = this.setState.bind(this);   
  }    

  deleteItem(record){
    console.log("Trashing", record.fields["Title"]);
    base(table).destroy(record.id, (err, deletedRecord) => {
      if (err) { console.error(err);  return  }
    })

    this.setState({record});   
  }

  async componentDidMount() {
    await this.fetchAirtable()
  }

  async fetchAirtable() {
    const records = await base(table).select().all()
      .then( r => {return r});
    this.setState({records});
  }

  render() {
    var {records} = this.state
    return (
      <div className="App">
        {records.map(record => 
          <ul  id="tasks" key={record.id} >
            <div id="due" className="task-field">
              { record.fields["Due Date"] }
              <img src={trash}
                   className="trashcan"
                   alt="trash"
                   onClick={(e) => this.deleteItem(record, e)}
                />
             </div>
           </ul>
         )}
       </div>
     )
   }    
}

Очевидно, что это не весь проект, но идея в том, что когда вы щелкаете по изображению корзины, он удаляет элемент. Это прекрасно работает, и элемент удаляется из базы данных Airtable. Проблема в том, что он не удаляется из приложения.

Любая помощь вам будет оценена!

PS. Вот мой каталог Github с этим проектом, если вам это нужно.

Редактировать 1: Благодаря @ManavM я обновил deleteItem(), Кажется, обновляется запись, но я до сих пор не могу обновить таблицу.

  deleteItem(record){
    base(table).destroy(record.id, (err, deletedRecord) => {
      if (err) { console.error(err);  return  }
    })

    this.fetchAirtable
  }
Источник

2 ответа

Решение

Проблема с этой частью кода

 async deleteItem(record){
    console.log("Trashing", record.fields["Title"]);
    base(table).destroy(record.id, (err, deletedRecord) => {
      if (err) { console.error(err);  return  }
      await this.fetchAirtable();
    })

    this.setState({record});   
  }

Во-первых, вы устанавливаете {record: record} где record Ключ не существует.

Что вам нужно сделать, это получить измененный base(table) после того, как вы завершили уничтожение записи.

Другой, более эффективный способ - это одновременно изменять свое состояние в соответствии с только что выполненным действием. То есть

const modifiedRecords = records.filter(rcd => rcd.id !== record.id;);
this.setState({records: modifiedRecords});
Источник

Я проверил с кодом, вы заметили, что в вашей функции render() вы дали var {records} = this.state где это должно быть var records = this.state.records нет необходимости в {}, когда его нет внутри возврата.

И если вы уверены, что состояние обновляется, и, тем не менее, функция рендеринга не перерисовывает таблицу, то вам следует попробовать shouldComponentUpdate(nextProps, nextState) и верните true в том случае, если были внесены изменения в новое состояние (которое еще предстоит отрендерить).

Источник
Другие вопросы по тегам