Javascript reactJS和导致无法读取null的属性“selectedIndex”

我有一个reactJS应用程序，其中使用以下代码呈现下拉选择：

renderPrimary = (passedid,value) => {  

    if (value=="Primary") {
        return (      
            <div className="col-9 text-left text_14">
                <select id={passedid}>
                    <option value="Primary" selected>Yes</option>
                    <option value="Secondary">No</option>
                </select>
            </div>
        )
    } else {
        return (      
            <div className="col-9 text-left text_14">
                <select id={passedid}>
                    <option value="Primary">Yes</option>
                    <option value="Secondary" selected>No</option>
                </select>
            </div>
        )
    }
}

            if (formIsValid) {
                var id = "benePorS"+(l+1);
                var element = document.getElementById(id);
                var id2 = "benePct"+(l+1);
                var element2 = document.getElementById(id2);

                var PorS = element.selectedIndex;
                console.log("PorS: ", PorS);
                if (PorS == 0) {
                    hasPrimary = true;   
                    primaryPct = primaryPct + element2.value;                     
                } else {
                    hasSecondary = true;
                    secondaryPct = secondaryPct + element2.value;  
                }
            }

执行代码时，我在console.log中看到以下内容：

PorS:  0

但后来我看到：

Uncaught TypeError: Cannot read property 'selectedIndex' of null
at Beneficiaryupdate.SaveBeneficiaryInformation

因此，当我选择No时，似乎可以访问所选的值，我在console.log中看到PorS:1，但是错误阻止了代码继续

这来自“开发人员工具元素”选项卡，显示呈现的html：

---

为什么我会收到此错误消息？

因为您正在使用react，所以应该有更好的方法来处理您的错误消息

第一:

您不需要在react的select标记中使用选定属性。如中所述，您只需在根选择标记中传递所选值，如下所示：

renderPrimary = (value) => {
    return (      
                <div className="col-9 text-left text_14">
                    <select value={value} >
                        <option value="Primary">Yes</option>
                        <option value="Secondary">No</option>
                    </select>
                </div>
            );
}

这样，只要您需要组件中的选定值，就可以访问this.state.selectedValue

第三：

如果确实需要获取此select或任何其他元素的DOM，可以使用react，如：

---

这样，一旦安装组件，this.selectRef就应该拥有DOM，但您不需要通过react访问DOM。

benePct+l+1；这在您的DOM中的什么位置？l的值是多少？l控制for循环。对于var l=0；l@jmargolisvt我还提供了一个html图像，该图像显示了选择项的id为benePorS1。您正在调用element.selectedIndex，但element为空。这意味着在页面上找不到具有该ID的元素。您的选择器错误，代码在元素出现在页面上之前执行，或者没有具有该ID的元素。您没有提供足够的代码来回答这些问题。Emmanuel:谢谢您的解决方案。我理解你的第一条和第二条，并希望实施第二条。我现在的问题是如何扩展代码以允许动态renderPrimary。换句话说，我的应用程序将根据用户需要的主要选择数量调用renderPrimary。这个数字可以从1到10。这就是我的原始代码基于passedid生成select元素id的原因。passedid将包含benePorS1、benePorS2、benePorS3、…benePorS10。您可以从状态启动selectedValue变量作为数组，因为您可以将数字传递给renderPrimary，您可以将其用作更新数组的索引。因此属性应该是value={this.state.selectedValue[index]}onChange={=>this.handleValueSelectedindex}。然后，在handleValueSelectedfunction中，将索引更新为const updatedValues=…this.state.selectedValues；updatedValues[索引]=event.target.value；设置状态{selectedValues:updatedValues}；现在，我的select命令是“否”。我让handleValueSelected=event，index=>{console.loghandleValueSelected，index:，index；localData.benePorS[index]=event.target.value；this.setState{data:localData}；}来处理更改，但它给了我一个错误。我认为我没有正确地将索引传递给handleValueSelected。如果将括号放在要设置为回调的函数上，如onChange={this.handleValueSelectedindex}，则会调用它并将返回值传递给onChange，而不是赋值。您可以在更改时将其写入箭头函数onChange={event=>this.handleValueSelectedevent，index}，因此您分配的是函数调用而不是结果。

constructor(props) {
    super(props);
    this.state = {
        selectedValue: "Primary"
    };
}

handleValueSelected = (event) => {
    this.setState({selectedValue: event.target.value});
}

renderPrimary = () => {
    return (      
                <div className="col-9 text-left text_14">
                    <select value={this.state.selectedValue} 
                            onChange={this.handleValueSelected}>
                        <option value="Primary">Yes</option>
                        <option value="Secondary">No</option>
                    </select>
                </div>
            );
}

constructor(props) {
    super(props);
    this.state = {
        selectedValue: "Primary"
    };
    this.selectRef = React.createRef();
}
handleValueSelected = (event) => {
    this.selectedValue = event.target.value;
}

renderPrimary = () => {
    return (      
                <div className="col-9 text-left text_14">
                    <select ref={this.selectRef} 
                            value={this.state.selectedValue} 
                            onChange={this.handleValueSelected}>
                        <option value="Primary">Yes</option>
                        <option value="Secondary">No</option>
                    </select>
                </div>
            );
}