Question

我在从Localstorage填充的ReactJS中有一个下拉列表。我还有一个按钮，用于删除localstorage条目，同时更新组件，以便包含条目的<option>标记也消失。我可以删除最后一个条目，但是当我在最后一个条目上按删除它时它不会从DOM中消失。举个例子，我想说我有3个条目Test1, Test2 and Test3。我表示按下＆＃34;删除按钮＆＃34;使用-- 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 |

所以无论我做什么，最后一个条目仍然出现。实际条目从localstorage中删除，但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

我认为问题是，在此函数UPDATE table_x SET sequence_number = ... -- for all rows ORDER BY name中existingProfiles条件中删除了所有项目后，您不会重置状态变量中的else值。

试试这个：

profilesHaveChanged

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

1 个答案: