React приложение не будет обновлять - PullRequest
Новая
       8

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

0 голосов
/ 27 июня 2018

Я делаю приложение для дел, используя 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 ]

0 голосов
/ 27 июня 2018

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

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

0 голосов
/ 27 июня 2018

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

 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});
...