React ComponentDidUpdate'this'未定义

Question

我试图根据字段名称是否存在于数组中来更新组件更新后的列可见性。我在'this' is undefined函数中遇到与this.updateColumnShow(field);有关的componentDidUpdate错误，但是我不确定为什么。该函数是使用es6编写的，因此无需在构造函数中进行绑定。我在this.setColumns中调用了一个单独的函数（componentDidUpdate），效果很好。这个有什么不同？

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>

Answer 1

'与char *escapeShellArg( char *arg ) { char *esc; uint16_t i, j, n; n = strlen( arg ); esc = calloc( 1, n * 4 + 3 ); esc[0] = '\''; j = 1; for( i = 0; i < n; i++ ) { if( arg[ i ] == '\'' ) { esc[ j ] = '\''; esc[ j+1 ] = '\\'; esc[ j+2 ] = '\''; esc[ j+3 ] = '\''; j += 4; } else { esc[ j++ ] = arg[ i ]; } } esc[ j ] = '\''; return esc; } 中的函数之间的主要区别是setColumns是该类的方法，这意味着forEach将绑定到对象。您应该将setColumns中的函数更改为箭头函数，因为箭头函数中的this指向外部作用域的forEach（在这种情况下为this）到对象。