javascript - 删除下拉选项使最后一个选项可见

Question

我在 ReactJS 中有一个下拉列表，它是从本地存储填充的。我还有一个按钮，可以删除本地存储条目，同时更新组件，以便 <option>包含条目的标签也会消失。我可以删除直到最后一个条目，但是当我按删除最后一个条目时，它不会从 DOM 中消失。举个例子，假设我有 3 个条目，Test1, Test2 and Test3 。我表示在使用 -- Delete 选择特定条目时按“删除按钮” 。我从删除 Test2 开始:

(想象这是下拉菜单)

Initial State | after 1st Del | after 2nd Del | after 3rd Del | ...

Test1 | Test1 | Test1 -- Delete | Test1 --Delete | Test1

Test2 -- Delete | Test3 -- Delete |

Test3 |

所以无论我做什么，最后一个条目仍然会出现。实际条目已从本地存储中删除，但 DOM 保持不变。如果我重新加载页面，该条目就会消失并且下拉列表为空，这就是我希望在不重新加载的情况下发生的情况。

这是我到目前为止得到的:

Profile.js

import React from 'react';
import { Button } from 'react-bootstrap';

function resetProfileForm() {
    document.getElementById("change-profile").selectedIndex = 0;
}

class Profile extends React.Component {
    constructor(props) {
        super(props);
            this.state = { 
                existingProfiles: [],
                currentSelectedProfile: ''
            };
        this.profilesHaveChanged = this.profilesHaveChanged.bind(this);
        this.profileChange = this.profileChange.bind(this);
        this.profileDeleteClick = this.profileDeleteClick.bind(this);
    }
    componentDidMount() {
        this.profilesHaveChanged();
    }
    profilesHaveChanged() {
        var currentExistingProfiles = [];
        for (var profile in localStorage) {
            if (profile !== ''){
                currentExistingProfiles.push(<option key={profile} value={profile}>{profile}</option>)
            } 
        }
        if (currentExistingProfiles.length > 0) {
            resetProfileForm();
            this.setState({
                existingProfiles: currentExistingProfiles,
                currentSelectedProfile: currentExistingProfiles[0].key
            })
        } else {
            this.setState({
                currentSelectedProfile: ''
            })
        }
    }
    profileChange(a) {
        this.setState({
            currentSelectedProfile: a.target.value
        });
    }
    profileDeleteClick() {
        localStorage.removeItem(this.state.currentSelectedProfile);
        this.profilesHaveChanged();
    }
    render() {
        return (
            <div className="changes">
                <h3>
                    Profiles
                </h3>
                <select 
                    value={this.props.currentSelectedProfile}
                    id="change-profile" 
                    onChange={this.profileChange}>
                        {this.state.existingProfiles}
                </select>
                <div className="button-container">
                    <Button onClick={this.profileDeleteClick} bsStyle="primary" bsSize="small" block>Delete</Button>
                </div>
            </div>
        );
    }
}

export default Profile;

对我做错/遗漏的事情有什么想法吗？提前致谢。

Answer 1

我认为问题是，当此函数profilesHaveChanged<中的else条件内的所有项目都被删除时，您没有重置状态变量中的existingProfiles值.

试试这个:

profilesHaveChanged() {
     var currentExistingProfiles = [];
     for (var profile in localStorage) {
         if (profile !== ''){
             currentExistingProfiles.push(<option key={profile} value={profile}>{profile}</option>)
          } 
     }
     if (currentExistingProfiles.length > 0) {
         resetProfileForm();
         this.setState({
             existingProfiles: currentExistingProfiles,
             currentSelectedProfile: currentExistingProfiles[0].key
         })
     } else {
         this.setState({
            currentSelectedProfile: '',
            existingProfiles: []   //added this line
         })
     }
}