Trying to add to React State Array using spread or push, Error: TypeError: array is not iterable

Question

我在初始状态对象中创建了一个数组，我试图在选中复选框时将项目添加到数组，并在未选中时删除项目。

我使用的功能非常简单，我看不出有什么理由不能使用它。我正在使用 setState 来传播数组中的项目并在末尾添加新项目，但我在浏览器上不断收到 TypeError 提示该数组不可迭代。我试过使用 typeof 来查看它是否是一个数组，结果是 undefined.

Click here to see the error I receive

我的代码是：

class Step3 extends React.Component {
    constructor() {
        super()

        this.state = {
            missingList: [],
        }

    }

    handleChangeArray = e => {
        this.setState({
            missingList: [...this.state.missingList, e.target.name]
        })
        console.log(this.state.missingList)
    }

    render() {

        const { currentProductType, ProductSubtype } = this.props

        return (
            <div className="row mt-4">

                <h4 className='subtitle'>Missing List</h4>

                {
                    systemData[`${currentProductType}`][`${ProductSubtype}`].parts.map((item, _id) =>
                        <CustomCheckbox
                            col={3}
                            key={_id}
                            name={item}
                            text={item}
                            onChange={this.handleChangeArray}
                        />
                    )

                }
            </div>
        )
    }
}

systemData 指向一个嵌套对象，列表来自该对象并使用 map 方法呈现复选框

Answer 1

嗯，这是因为 handleChange 未绑定到 Step3 class。因此，当 CustomCheckBox 调用 handleChange 时，this 的上下文将引用 CustomCheckBox 而不是 Step3。所以，this.missingList 是正确的 undefined。简直就是this.

的范围

检查您的用例的这个最小复制器。评论 bind 行将导致您发布的错误。 https://codesandbox.io/embed/upbeat-smoke-q0iei?fontsize=14&hidenavigation=1&theme=dark

进一步阅读：https://reactjs.org/docs/handling-events.html

Trying to add to React State Array using spread or push, Error: TypeError: array is not iterable

Trying to add to React State Array using spread or push, Error: TypeError: array is not iterable

javascript

arrays

state

push

reactjs