Reactjs React组件更新'；这'；是未定义的

我试图在组件更新后根据数组中是否存在字段名更新列可见性。我收到一个

“this”未定义的错误，因为它与
this.updateColumnShow（字段）相关componentdiddupdate
函数中使用code>，但我不确定原因。该函数是使用es6编写的，因此不需要在构造函数中绑定它。我在
componentdiddupdate
中调用了一个单独的函数（
this.setColumns
），效果很好。这个有什么不同

class QueryOptionsTable extends React.Component {

    constructor(props) {
        super(props);

        /*state values within the arrays are dynamic*/
        this.state = {
            columns: [],
            columnList: [],
            removedColumns: [],
            qryFieldSearch: ""
        }

        this.textInput = React.createRef();
    }

    componentDidMount() {
        this.props.actions.getQueryPreview(this.props.query);
        this.props.actions.getQueryRecordCount(this.props.query);
    }

    componentDidUpdate(prevProps, prevState) {
        //debugger;
        let fieldArray = JSON.parse(sessionStorage.getItem("qryFieldArray")); //returns fine
        if (prevProps.queryPreviewResults !== this.props.queryPreviewResults && this.props.queryPreviewResults.length > 0) {
            this.setColumns();
        }

        if (fieldArray.length > 0 && prevState.columnList !== this.state.columnList && this.state.columnList.length > 0) {
            /*Loop through the array list and use this value to mark column as show
            else remove column*/
            let columnsToHide = this.state.columnList.filter(x => !fieldArray.includes(x)); //getting correct results
            columnsToHide.forEach(function (field) {
                console.log("FIELD TO HIDE: ", field) //this logs correctly
                this.updateColumnShow(field); //this is undefined
            })
        }
    }

    setColumns = () => {
        Object.keys(this.props.queryPreviewResults[0]).map(key => {
            this.setState({ [key]: true });//monitor 'checked' property of checkbox?
            this.setState(prevState => ({
                columns: [...prevState.columns,
                {
                    Header: key,
                    accessor: key,
                    show: true,
                    width: 175
                }],
                columnList: [...prevState.columnList, key]
            }))

            return this.state;
        }
        )
    }

    focus = () => {
        // Explicitly focus the text input using the raw DOM API
        // Note: we're accessing "current" to get the DOM node
        this.textInput.current.focus();
    }

    /** show/hide columns. colums are all shown on first render. 
    * Checking them removed them from view
    */
    updateColumnShow = fieldName => {
        this.focus();
        this.setState({ [fieldName]: !this.state[fieldName] });
        this.setState(state => {
            const columns = state.columns.map(column => {
                if (column.Header === fieldName) {
                    column.show = !column.show;
                    if (!column.show === false) {
                        //add to list of columns to be removed
                        this.removeColumns(fieldName);
                    } else {
                        //remove from list of columns to be removed
                        this.addColumns(fieldName);
                    }
                    return column
                } else {
                    return column;
                }
            });
            return { columns }
        })
    }

相关JSX：

 <Col xs={3}>
                        <h6>Choose Columns:</h6>
                        <input
                            type="text"
                            value={this.state.qryFieldSearch}
                            onChange={this.updateQryFieldSearch}
                            placeholder="Search Field Names..."
                            className="form-control"
                            aria-describedby="searchbox"
                        ref={this.textInput}
                        />
                        <br />
                        <ul className="query-columns-selector">
                            <li>
                                <label>
                                    <input
                                        type="checkbox"
                                        name="removeAll"
                                        onChange={() => this.hideAllColumns()}
                                        className="form-check-input"
                                    />
                                    Remove All Columns</label>
                            </li>
                            {qryFieldFilteredList.map(listItem => (
                                <li key={listItem}>
                                    <label>
                                        <input
                                            id={listItem}
                                            checked={this.state[listItem]}
                                            className="form-check-input"
                                            type="checkbox"
                                            name={listItem}
                                            onChange={() => this.updateColumnShow(listItem)}
                                        />
                                        {listItem}</label>
                                </li>
                            )
                            )}
                        </ul>
                    </Col>


选择列：




this.hidealColumns（）}
className=“表单检查输入”
/>
删除所有列

{qryFieldFilteredList.map（listItem=>(

this.updateColumnShow（listItem）}
/>
{listItem}

)
)}

设置列
与
forEach
中的函数之间的主要区别在于
设置列
是类的方法，这意味着
此
将绑定到对象。您应该将
forEach
中的函数更改为箭头函数，因为箭头函数中的
此
指的是外部作用域的
此
（在这种情况下，
组件diddupdate
）
setColumns
与
forEach
中函数的主要区别在于
setColumns
是类的方法，这意味着
此
将绑定到对象。您应该将
forEach
中的函数更改为arrow函数，因为arrow函数中的
this
指的是指向对象的外部作用域（在本例中为
componentdiddupdate
）的
this
。
当然-旧习惯难以改变。谢谢我是来回答这个问题的，但你解释得太好了，我觉得没必要再补充什么了。荣誉投了1票：-）当然-旧习惯难改。谢谢我是来回答这个问题的，但你解释得太好了，我觉得没必要再补充什么了。荣誉投1票：-）