React 应用程序不会更新

Question

我正在使用 React JS 和 Airtable 制作一个待办事项应用程序，它可以方便地 API 管理数据。我是 React 的新手，我对 JS 和 APIs 的经验有限，但我已经弄清楚了我需要做的大部分事情。

我的问题主要是基于 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()。它似乎正在更新记录，但我仍然没有让我的 table 刷新。

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

    this.fetchAirtable
  }

Answer 1

这部分代码有问题

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

Answer 2

我检查了代码，您是否注意到在您的 render() 函数中您已经给定了 var {records} = this.state 它必须是 var records = this.state.records 时不需要 {}不在 return 里面。

如果您确定状态已更新，但渲染函数不会重新渲染 table，那么您应该尝试 shouldComponentUpdate(nextProps, nextState) 和 return true，如果更改被制作成新状态（仍然需要渲染）。

React 应用程序不会更新

React app wont update

javascript

reactjs

airtable