清空通过 RactJS / Axios(this.props) 填充的 table

Question

我通过 Axios->Reducer 获取数据，然后用 React-Redux(@connect) 包装它并将其分派到道具中：

this.props.dispatch(fetchContacts(this.state.searchParam));

然后让 ReactJS 渲染 table.

如果用户按 ESC，我想重置所有过滤器并清空 table。我是 ReactJS 的新手，所以我还不知道所有规则，但似乎你不应该自己触摸 DOM 以避免出现问题。

我的尝试看起来像：

let tbody = document.getElementById('contactList').getElementsByTagName('tbody')[0];
//Empty table
while (tbody.firstChild) {
  tbody.removeChild(tbody.firstChild);
}

但是如果我这样做，当我尝试加载新数据集时会出现以下错误：

test.js:6210 Uncaught (in promise) TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at removeChild

我如何告诉 reactJS 清空 table 或者至少告诉它它已经是空的？

或者我认为我必须做的，重置道具？在 react 中更改 props 似乎不是那么直接。

Answer 1

当用户按下 esc 键时，所有其他方法从操作中删除联系人。 Return 一些动作类型 'REMOVE_CONTACTS' 到 reducer 并且在 reducer 中只是清空状态属性。这将 return 空对象到您调用 mapStateToProps 的容器。这将重新呈现没有数据的 table。

清空通过 RactJS / Axios(this.props) 填充的 table

Empty a table that was filled via RactJS / Axios(this.props)

javascript

reactjs

axios