javascript - Uncaught TypeError: e is null after using a new component and modify its Onchange function

Question

问题的简要概述：我在下面解释两种情况。

场景 #1 - 当使用 primereact 多选组件并且一切正常时。

场景 #2 - 当使用新组件react-select-virtualized而不是 primereact 的多选组件时，与 OnChange 函数相关的更改会引发错误。

我对道具有疑问，如下所述：

场景 #1 - 这里一切正常。

使用多选组件，我正在研究一个代码，其中onChange函数在组件中定义如下AutoProjects.js：

render() {

        return (
            <div>
 <MultiSelect value={this.state.selectedProjectsValues} options={this.state.selectedProjects}  onChange={this.onChange} filter itemTemplate={this.cohortTemplate} selectedItemTemplate={this.selectedProjectsTemplate} />
            </div>
        );
    }

onChange函数定义如下：

onChange = (event) => {

        console.log("Testing inside Onchange");
        console.log(event);

       this.setState({
            value: event.value?event.value:null,
            selectedProjectsValues: event.value?event.value:null
        });
        this.props.onChange(event.value?event.value:null)
    };

当我从下拉列表中选择某些内容并测试 console.log 中事件的值时，它看起来像以下

Testing inside Onchange AutoProjects.js:64:15
{…}
​
originalEvent: Object { dispatchConfig: null, _targetInst: null, _dispatchListeners: null, … }
​
preventDefault: function preventDefault()​
stopPropagation: function stopPropagation()​
target: Object { name: null, id: null, value: (1) […] }
​
value: (1) […]
​​
0: Object { label: "Some text here", projectTitle: "Some text here", projectId: 76776 }
​​
length: 1
​​
<prototype>: Array []
​
<prototype>: Object { … }

我正在调用上述组件，RequestForm.js如下所示：

const RequestForm = (props) => {
        const {values, setFieldValue, touched, errors, isSubmitting, handleReset, handleChange} = props;
    
     return (
        <div>
            <div id="formDiv">
                <Growl ref={growl}/>
                <Form className="form-column-3">
                    <div className="form-field full-width-field">
                        <label className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated custom-label">Select Projects</label>
                        <AutoProjects
                            fieldName='projects'
                            value={values.projects}
                            onChange={ev => handleProjectsChange(ev, setFieldValue)}
                        />
                    </div>
                    </Form>
            </div>
        </div>
    )

};

function handleProjectsChange(e, setFieldValue) {
    const projectsVal = e.map((d) => {
        return d.projectId
    });

    setFieldValue('projects', projectsVal, false)
}
                   
                
                

问题： 场景 #2 - 使用新组件 react-select-virtualized

我现在使用不同的组件而不是 MultiSelect 组件并像这样定义它：

import {Select as ProjectSelect} from 'react-select-virtualized';

render() {

        return (
            <div>
                <ProjectSelect  value={this.state.selectedProjectsValues} options={this.state.selectedProjects} onChange={this.onChange } optionHeight={40} /> 
             </div>
        );
    }

因为，console.log内部OnChange函数是这样打印的：

Inside onChange event after using new component AutoProjects.js:86:15
Object { lowercaseLabel: "some new component text here", label: "Some New Component Text here", projectTitle: "Some New Component Text here", projectId: 76777 }        

我修改了Onchange这样的函数以匹配我在中看到的内容console.log：

  onChange = (event) => {
        console.log("Inside onChange event after using new component");
        console.log(event);

        this.setState({
            value: event.Object?event.Object:null,
            selectedProjectsValues: event.Object?event.Object:null
        });
        this.props.onChange(event.Object?event.Object:null)
    };

但是，每当我从下拉列表中选择任何内容时，都会出现错误：

Uncaught TypeError: e is null
    handleProjectsChange webpack:///./src/main/js/components/RequestForm.js?:156
    onChange webpack:///./src/main/js/components/RequestForm.js?:266
    onChange webpack:///./src/main/js/components/forms/AutoProjects.js?:94
    O webpack:///./node_modules/react-select-virtualized/dist/index.min.js?:1
    callProp webpack:///./node_modules/react-select/dist/stateManager-04f734a2.browser.esm.js?:102
    onChange webpack:///./node_modules/react-select/dist/stateManager-04f734a2.browser.esm.js?:42
    onChange webpack:///./node_modules/react-select/dist/Select-9fdb8cd0.browser.esm.js?:1088
    setValue webpack:///./node_modules/react-select/dist/Select-9fdb8cd0.browser.esm.js?:1115
    onClick webpack:///./node_modules/react-select-virtualized/dist/index.min.js?:1
    React 17
    unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:653
    React 19
    unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:653
    React 6
    componentDidMount webpack:///./src/main/js/components/Main.js?:205
    promise callback*componentDidMount webpack:///./src/main/js/components/Main.js?:202
    React 6
    unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:653
    React 10
    <anonymous> webpack:///./src/main/js/app.js?:36
    js http://localhost:3000/bundle.js:27934
    __webpack_require__ http://localhost:3000/bundle.js:790
    fn http://localhost:3000/bundle.js:101
    <anonymous> webpack:///multi_(webpack)-dev-server/client?:2
    0 http://localhost:3000/bundle.js:28460
    __webpack_require__ http://localhost:3000/bundle.js:790
    <anonymous> http://localhost:3000/bundle.js:857
    <anonymous> http://localhost:3000/bundle.js:860
bundle.js line 28054 > eval:156:22
    handleProjectsChange webpack:///./src/main/js/components/RequestForm.js?:156
    onChange webpack:///./src/main/js/components/RequestForm.js?:266
    onChange webpack:///./src/main/js/components/forms/AutoProjects.js?:94
    <anonymous> self-hosted:1177
    O webpack:///./node_modules/react-select-virtualized/dist/index.min.js?:1
    callProp webpack:///./node_modules/react-select/dist/stateManager-04f734a2.browser.esm.js?:102
    onChange webpack:///./node_modules/react-select/dist/stateManager-04f734a2.browser.esm.js?:42
    onChange webpack:///./node_modules/react-select/dist/Select-9fdb8cd0.browser.esm.js?:1088
    setValue webpack:///./node_modules/react-select/dist/Select-9fdb8cd0.browser.esm.js?:1115
    onClick webpack:///./node_modules/react-select-virtualized/dist/index.min.js?:1
    React 17
    bind_applyFunctionN self-hosted:1375
    dispatchEvent self-hosted:1338
    unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:653
    React 4
    bind_applyFunctionN self-hosted:1375
    dispatchDiscreteEvent self-hosted:1338
    React 14
    performSyncWorkOnRoot self-hosted:1224
    flushSyncCallbackQueueImpl React
    unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:653
    React 6
    componentDidMount webpack:///./src/main/js/components/Main.js?:205
    (Async: promise callback)
    componentDidMount webpack:///./src/main/js/components/Main.js?:202
    React 6
    commitRootImpl self-hosted:1281
    unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:653
    React 10
    <anonymous> webpack:///./src/main/js/app.js?:36
    js http://localhost:3000/bundle.js:27934
    __webpack_require__ http://localhost:3000/bundle.js:790
    fn http://localhost:3000/bundle.js:101
    <anonymous> webpack:///multi_(webpack)-dev-server/client?:2
    0 http://localhost:3000/bundle.js:28460
    __webpack_require__ http://localhost:3000/bundle.js:790
    <anonymous> http://localhost:3000/bundle.js:857
    <anonymous> http://localhost:3000/bundle.js:860 

Onchange如果有新组件，我是否没有正确处理该功能？

标签： javascriptreactjs