javascript - react.js 动态抓取对象导致未定义

Question

我正在学习 react.js。我有一个对象文字，我正在尝试根据从选择输入中选择的内容动态选择对象中的对象。但是，我变得不确定。我已经尝试了点和括号符号。我成功地获取了所选选项的值并将其存储在一个变量中。有什么想法吗？

这是我的对象:

var horoList = {
aries: {
    title: "JerkFace",
},
cancer: {
    title: "Cancerous",
},
gemini : {
    title: "GoofBall"
}
} ;

这是渲染方法中的一些 JSX:

                    <select name="pick-sign" onChange={this.handleChange}>
                        <option></option>
                        <option value="aries" >Aries</option>
                        <option value="cancer" >Cancer</option>
                        <option value="gemini" >Gemini</option>
                        <option value="taurus" >Taurus</option>
                    </select>

这是我的句柄更改方法:

        handleChange: function(e) {
        var selectedHoro = e.target.value;
        console.log(selectedHoro); //outputs: aries
        console.log(horoList); //outputs: Object {aries: Object, cancer: Object, gemini: Object}
        console.log(horoList.aries); //ouputs: Object {title: "JerkFace"}
        console.log(horoList['selectedHoro']); //outputs: undefined
        // this.setState({
        //  horos: horoList.selectedHoro
        // });
    },

Answer 1

如果你改变这一行:

console.log(horoList['selectedHoro']);//输出:未定义

收件人:

console.log(horoList[selectedHoro]);

您应该得到预期的输出。当您使用 horoList['selectedHoro'] 时，将使用文字字符串值 selectedHoro，因此它将是 horoList.selectedHoro。当您使用 horoList[selectedHoro] 时，selectedHoro 是一个变量，它的值用于确定您要解析的属性名称，因此它会解析为 horoList。 aeries(当 selectedHoro === aeries)。