反应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（）看起来像这样，我认为应该是正确的

我想，由于启动时输入插槽已正确渲染，因此更新数据时应该发生了某些事情，我不知道。

感谢您的帮助。

Answer 1

ORIGINAL是一个数组，UPDATED是一个对象。

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

应为：

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