Socket.io的函数socket.on仅被调用一次

Question

尝试构建具有两套下拉菜单的Webapp，第二套以第一套为条件。此功能适用于第一个选择，但是如果您更改第一个下拉菜单，则第二个则不返回任何内容。我已将问题跟踪到SubDropdown内的Socket.on。 Socket.on首次运行，但是尽管组件的封装功能正在运行，但在更改组件时不会更新。

反应成分：

class SubDropdown extends React.Component {
    constructor(props) {
        super(props);
        this.toggle = this.toggle.bind(this);
        this.select = this.select.bind(this);
        this.props
        this.state = {
            dropdownOpen: false,
            value: "Select",
            options: [],
            socket: socketIOClient("localhost:7000")
        };

    }

    toggle(){
        this.setState({
            dropdownOpen: !this.state.dropdownOpen
        });
    }
    pullFromSocket(){
        console.log(this.props.mainDropdownValue);
        this.state.socket.on(this.props.mainDropdownValue, (_options) => {
            _options = _options.data;
            this.state.options = [];
            // setting the color of our button
            Object.keys(_options).forEach(function(key) {
                this.addToOptions(_options[key])
            }.bind(this))
        })
    }
    componentDidMount(){
        this.pullFromSocket();
    }
    componentWillUnmount(){
        this.state.socket.close();
    }
    componentDidUpdate(prevProps){

        if(this.props.mainDropdownValue != prevProps.mainDropdownValue)
        {

            this.setState(({
                value: "Select",
                options: []
            }))
            this.pullFromSocket();
        }
    }
    addToOptions(option){
        console.log(option);
        this.setState(prevState => ({
          options: prevState.options.concat(option),
        }))
    }
    select(event) {
        this.setState({
          dropdownOpen: !this.state.dropdownOpen,
          value: event.target.innerText
        });


    }
    render() {
        return (
            <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
            <DropdownToggle onChange={this.props.onChangeValue(this.state.value)} caret> {this.state.value}</DropdownToggle>
            <DropdownMenu>{
                this.state.options.map((option) => (
                    <DropdownItem onClick={this.select} key={option.id} value={option.dropdown_value}>{option.dropdown_value}</DropdownItem>
                ))}
            </DropdownMenu> 
            </Dropdown>
        );
    }
  }

  export default SubDropdown;

下面的节点服务器：

let map = new Map();
let columns = ""
let parseName = (name) => {
  return name.split(" ").join("_").toLowerCase();;
}
let loadColumns = async () => {
  columns =  await client.getItems('column_heading');
  columns.data.map(async (column) => {

      if(column.database_access){
        map.set(column.dropdown_value, await client.getItems(parseName(column.dropdown_value)));
      }
  })

}
loadColumns();

io.on('connection', (socket) => {
  console.log('User connected')

  socket.on('disconnect', () => {
    console.log('User disconnected')
  })
  //TODO: make one function for socket emit
  socket.emit('getOptions', columns);

  socket.emit('Artefact Type', map.get('Artefact Type'));

  socket.emit('Period', map.get('Period'));

  socket.emit('Inside or Outside Fort', map.get('Inside or Outside Fort'));

  socket.emit('Year Excavated', map.get('Year Excavated'));

  socket.emit('Shoe Construction Type', map.get('Shoe Construction Type'));

  socket.emit('Shoe Type', map.get('Shoe Type'));

  socket.emit('Shoe Style', map.get('Shoe Style'));

  socket.emit('Stud Pattern', map.get('Stud Pattern'));

  socket.emit('Sole Shape', map.get('Sole Shape'));

  socket.emit('Foot', map.get('Foot'));

  socket.emit('Spatial Definition', map.get('Spatial Definition'));

  socket.emit('Possible Owner',map.get('Possible Owner'));

  socket.emit('Markings', map.get('Markings'));

  socket.emit('Condition', map.get('Condition'));
})

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {s
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
console.log()
server.listen(process.env.PORT || 7000);