Question

在我的React组件中有一个可选属性。根据是否设置，将显示模态对话框。因此，当应该关闭/隐藏模态时，不应该设置属性。

我的州（简化）：

interface IRequestNewState {
    pendingPlayer?: PlayerDataViewModel;
}

可以看出，属性pendingPlayer在州内是可选的。

在我的模式内部表单的submitclick-handler中，我想重置属性并更新状态。

这样做是这样的：

    ev.preventDefault();
    ev.stopPropagation();

    var theForm = ev.target as HTMLFormElement;

    if (theForm.checkValidity() === false) {
        theForm.classList.add("was-validated");
        this.setState(this.state);
        return;
    }

    const playerToAdd: PlayerResource = {};

    var formData = new FormData(theForm);
    for (let pair of formData.entries()) {
        pathval.setPathValue(playerToAdd, pair[0], pair[1]);
    }

    var newState = { ...this.state } as IRequestNewState;

    newState.theTeam.validatedTeamPlayers.push({ player: playerToAdd });
    delete newState.pendingPlayer;
    this.setState(newState);

注意：使用spread-operator，因为我在状态上的更改比此处显示的更多（因为它不属于问题）。

这将从pendingPlayer中移除newState属性。但是，当调用下一个render时，仍会设置该属性。我在这里做错了什么？

另一方面，我也尝试设置newState.pendingPlayer = null;，这让我（至少ReSharper会这样做）出现以下错误：

无法转换类型＆＃39;任何＆＃39;输入＆＃39; PlayerDataViewModel＆＃39;：输入＆＃39; any＆＃39;没有与＆＃39; PlayerDataViewModel＆＃39;
类型相同的属性

这仍然可以编译，但我不明白这里的错误。我想要一个解决方案，向我展示绿灯而不隐藏任何警告。

那么delete newState.pendingPlayer声明的问题是什么？

Answer 1

setStates 可以进行批处理，不一定在调用时运行。 @Rick Jolly说你不需要这样做.setState（this.state）;可能是你遇到这个问题的原因。如果您只是尝试重新渲染而不进行状态更改（因为它出现在您使用this.setState（this.state）的位置），请使用this.forceUpdate（）;

尝试使用delete

1 个答案: