通过 setState 反应更新嵌套数组元素

Question

我正在尝试设置输入字段的状态。

我想在按下某个键时更新特定的输入值。

setState 状态看起来不错，但我在渲染部分的地图功能上遇到错误。 (this.state.form[this.state.mode].form.map)

我不明白为什么它在地图上坏了。

export type IMode = "login" | "forgot";
export interface IInput {
    value: string;
    error: string;
    id: string;
    name: string;
    placeholder: string;
    type: "text" | "password";
}
export interface IState {
    isRequestPending: boolean;
    backendError: string;
    mode: IMode;
    form: {
        [key in IMode]: {
            name: string;
            method: string;
            action: string;
            fields: IInput[];
        };
    };
}

in constructor 
       this.state = {
            isRequestPending: false,
            backendError: "",
            mode: "login",
            form: {
                login: {
                    name: "Login",
                    method: "",
                    action: "",
                    fields: [
                        {
                            value: "",
                            error: "",
                            id: "test",
                            placeholder: "Login",
                            type: "text",
                            name: "login"
                        }
                    ]
                },
                .... and so on

            }
        };
    private handleFormInput = (e, input: IInput, index) => {

        this.setState((prevState) => ({
            ...prevState,
            backendError: "",
            form: {
                ...prevState.form,
                [this.state.mode]: {
                    ...prevState.form[this.state.mode],
                       fields: {
                            ...prevState.form[this.state.mode].fields,
                           [index]: {
                                ...prevState.form[this.state.mode].fields[index],
                                value: "it Works, but map crash"
                           }
                       }
                }
            }
}

Answer 1

您正在将 fields 转换为不包含 map 方法的 object。像这样更新你的状态

this.setState(prev =>({
   /*...*/
   fields : prev.form[this.state.mode].fields.map((field, i) =>{
       if(i !== index) return field
       return {
           ...field,
           value : 'foo'
       }
   })
}))

通过 setState 反应更新嵌套数组元素

React updating nested arrayelement via setState

setstate

typescript

reactjs