javascript - 如果我需要在 React 组件之后设置 State，如何对服务器的失败响应使用react？

Question

我有一个元素列表，我可以通过单击它们来删除每个元素(单击会触发对服务器的调用，服务器会发回新列表，但不包含已删除的项目)。

但我需要在服务器响应到达之前从 View 中直观地删除它们。

我是这样做的

state = {
        items: this.props.items,
        deletedItem: null
    };

onClickDelete = (item) => {
        const {items} = this.state;
        const itemsCopy = {...items};

        for (const [key, value] of Object.entries(itemsCopy)) {
            if (value.id === tag.id) {
                delete itemsCopy[key];
                this.setState({
                    items: itemsCopy,
                    deletedItem: value
                });
            }
        }

        reduxActions(item)
    };

所以这正在发生:

我的初始元素来自 Prop 。当我单击该项目时，我会将其过滤掉状态(这样该项目就会立即从 View 中消失)。然后我发送向服务器执行请求的操作。

但是对服务器的请求可能会返回错误。在这种情况下，我想将已删除的项目恢复到原来的状态，这样它就会再次出现。

最初，我想在 Redux 状态中创建一个标志，例如 itemDeleted: true。如果请求成功，它会保持true，如果发生错误 - 它会变成false。

问题如下:

为了 react 并重绘组件，添加一个项目，我在渲染方法中做了类似的事情

if (!itemDeleted && !!deletedItem) { this.returnOnError(); }

函数是

returnOnError= (): void => {
        const { deletedItem } = this.state;

        this.setState(prevState => ({
            items: {
                ...prevState.items,
                [deletedItem.id]: deletedItem
            }
        }));
    };

这会导致两个问题 - 一是我在渲染中调用 setState。另一个是，当我单击一个有错误的项目时 - 属性 itemDeleted 变为 false，如果我再次单击并再次收到错误，则 itemDeleted 已经为 false，因此 returnOnError 无论如何都会触发，无需等待服务器的结果。

我有点迷失了，所有的帮助将不胜感激。唯一的限制是我需要在从服务器获得响应之前删除该项目。

Answer 1

您正在尝试做的事情称为“乐观的 UI 更新”。

1-) 删除项目之前，请保存原始项目。

2-) 立即更新 UI，无需等待 api 调用。

3-) 如果出现 api 错误，恢复原始项目。

你可以尝试这样的事情:

handleDelete = async item => {
  /* store the current state in previousItems, just in case of server side fail */
  const previousItems = this.state.items;

  /* optimistically update on react side */
  const items = this.state.items.filter(p => p.id !== item.id);
  this.setState({ items });

  /*  If server side fail, rollback the state */
  try {
    await axios.delete(apiEndpoint + "/" + item.id);
  } catch (e) {
    this.setState({ items: previousItems });
  }
};

Here是一个使用react-redux 来说明这一点的示例工作codesandbox。