Question

我在React中有一个简单的数据库，通过Ajax处理对数据库的更新和删除。

在记录组件上成功调用Ajax之后，更新或删除的记录将传递给记录组件，该组件显示所有记录。

在那里，下面的句柄方法更新记录的状态并重新呈现结果。

我的问题是，虽然handleDelete方法工作正常（并且重新呈现没有删除记录的记录），但handleUpdate方法不会，并且在刷新页面之前保留未更新的记录。

为什么handleUpdate中的setState不会重新呈现结果？

以下是代码：

 public String finder( String dirName){
        File dir = new File(dirName);
        File[] fList = dir.listFiles();

        return "";

    }

Answer 1

您应始终将状态视为 immutable ，永远不要直接修改它。复制其内容，修改副本并重新设置。

我准备了一支笔，我为你的<Record />即兴创作了一个实现，并重写了onUpdate和onDelete逻辑，将状态视为不可变的，创建了一个新的{{1}通过映射或过滤旧的数组并再次设置它。见here。我已经重命名了几件事，但它大致相同！

这些是重点：

records

我们收到更新的记录并映射旧数组：如果我们找到与新数组具有相同handleUpdate (record) { const records = this.state.records.map(r => { if (r.id !== record.id) return r; return record; }) this.setState({records}) }的元素，则返回后者，否则返回原始元素。 id返回一个新数组，因此我们很安全。

map

这里我们只需要id，然后我们过滤状态上的handleDelete (id) { const records = this.state.records.filter(r => r.id !== id) this.setState({records}) }数组，省略了我们要删除的records元素。同样，id返回一个新数组，所以我们很好。

希望这有帮助！

Answer 2

一个简单的

componentWillReceiveProps() {}

收到道具时会触发并使用更新后的状态。

在React中更新后无法重新渲染

2 个答案: