javascript - React 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>
    )

它在第一次打开页面时有效，但当我尝试在该输入选项卡中键入内容时，出现错误。

这是 InputChangedHandler 函数的说明:

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 D 是一个对象。

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

应该是:

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