反應TypeError：this.state.descriptions.map不是函數

Question

我正在嘗試解決此錯誤

我正在嘗試做的是呈現由該功能構建的自動表格：

let descriptionsForm = (
        <form>
        {this.state.descriptions.map((description, index) => (
            <Input
                key={index}
                elementType={description.elementType}
                elemenyConfig={description.elementConfig}
                value={description.value}
                invalid={!description.valid}
                shouldValidate={description.validation}
                touched={description.touched}
                changed={(event) => this.descriptionInputChangedHandler(event, index)}
                />
        ))}
        </form>
    )

第一次打開頁面時它可以工作，但是當我嘗試在“輸入”選項卡中鍵入內容時，會顯示錯誤。

這是descriptionInputChangedHandler函數：

descriptionInputChangedHandler = (event, index) => {
    console.log("ORIGINAL: ", this.state.descriptions)
    const updatedDescriptions = {
        ...this.state.descriptions
    };

    const updatedDescriptionElement = {
        ...updatedDescriptions[index]
    };
    updatedDescriptionElement.value = event.target.value;
    updatedDescriptionElement.valid = this.checkValidity(updatedDescriptionElement.value, updatedDescriptionElement.validation);
    updatedDescriptionElement.touched = true;
    updatedDescriptions[index] = updatedDescriptionElement;

    let formIsValid = true;
    for (let index in updatedDescriptions) {
        formIsValid = updatedDescriptions[index].valid && formIsValid;
    }
    console.log("UPDATED D: ", updatedDescriptions);

    this.setState({descriptions: updatedDescriptions, descriptionFormIsValid: formIsValid})
}

console.log（）s看起來像這樣，我認為應該是正確的

我想由於啟動時輸入插槽已正確渲染，因此更新數據時應該發生了某些事情，我不知道。

謝謝你的幫助。

Answer 1

ORIGINAL是一個數組，UPDATED是一個對象。

    const updatedDescriptions = {
       ...this.state.descriptions
    };

應該：

    const updatedDescriptions = [
       ...this.state.descriptions
    ];