0

我正在使用 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
  }
4

2 回答 2

0

问题在于这部分代码

 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});
于 2018-06-27T03:29:39.153 回答
-1

I've checked with the code, have you noticed that in your render() function you've given var {records} = this.state where it must be var records = this.state.records there is no need for {} when its not inside the return.

And if you're sure the state gets updated and yet the render function does not rerender the table, then you should try shouldComponentUpdate(nextProps, nextState) and return true in that if changes are made to the new state ( Which still has to be rendered ).

于 2018-06-27T06:52:29.120 回答