在 ReactJS 中动态添加/删除下拉列表

Question

我正在根据数组的索引动态添加和删除下拉菜单。我正在使用设置索引。添加或删除下拉列表时，我会递增和递减该索引。目标是一个看起来像这样的数组：

[
  { index: 0, type: "facebook" },
  { index: 1, type: "instagram" }
]

问题是当我添加一个新的下拉列表时，索引递增 2 或 3 而不是 1，导致以下输出。

[
  { index: 0, type: "facebook" },
  { index: 2, type: "instagram" }
]

这是我的组件的代码：

class SocialProfileComponent extends Component {
    constructor(props) {
        super(props);
        let index = 0;
        this.state = {
            options: [ 
                {value: 'email', label: 'Email'},
                {value: 'instagram', label: 'Instagram'},
                {value: 'linkedin', label: 'Linkedin'},
                {value: 'pinterest', label: 'Pinterest'},
                {value: 'skype', label: 'Skype'},
                {value: 'tiktok', label: 'TikTok'},
                {value: 'tumblr', label: 'Tumblr'},
                {value: 'twitter', label: 'Twitter'},
                {value: 'whatsapp', label: 'WhatsApp'},
                {value: 'wordpress', label: 'Wordpress'},
                {value: 'youtube', label: 'Youtube'},
                {value: 'other', label: 'Other'},
                
            ],
            socialDetails: [
                {
                    index: index,
                    type: "",
                    link: "",
                    
                }
            ]
        };
    }

    addNewRow = (e) => {
        
        this.setState(prevState => ({
            socialDetails: [
                ...prevState.socialDetails,
                {
                    index: index++,
                    type: "",
                    link: "",
                }
            ]
        }));
    }

    deleteRow = (index) => {
        this.setState({
            socialDetails: this.state.socialDetails.filter(
                (s) => index !== s.index
            )
        })
    }

    clickOnDelete(record) {
        this.setState({
            socialDetails: this.state.socialDetails.filter(r => r!==record)
        })
    }

    componentDidMount() {

    }

    render = () => {
        let {socialDetails, options} = this.state;
        const {onInputChange} = this.props;
        return (
            <>
                <SocialProfile 
                    label={`Social profiles`}
                    addRow={this.addNewRow}
                    deleteRow={this.deleteRow}
                    socialDetails={socialDetails}
                    options={options}
                    onInputChange={onInputChange}
                    formKey={'socialprofiles'}
                    createKeyValue={this.createNewKeyValuePair}
                    placeholder={'Select'}
                />
            </>
        )
    }
}

Code Sandbox

Answer 1

您遇到的索引增加 2 或 3 的行为是 React strict mode. In addition to other things, strict mode helps detect unexpected side effects to help you prepare your app for the upcoming concurrent mode 功能的结果。在并发模式下，React 会将渲染分解为更小的块，根据需要暂停和恢复工作。这意味着渲染阶段生命周期方法 可以运行不止一次 .

为了帮助您为即将到来的并发模式行为做好准备，严格模式将有意调用渲染阶段生命周期两次，以识别潜在的副作用。状态更新函数是其中的一个实例，这意味着在你的状态更新函数中调用 index++ 在严格模式下将是运行两次。

最简单的解决方案是在调用 this.setState 之前简单地将新索引分配给一个变量，这样您的状态更新函数是幂等的并且可以被多次调用。

addNewRow = (e) => {
  const newIndex = ++this.index

  this.setState((prevState) => ({
    socialDetails: [
      ...prevState.socialDetails,
      {
        index: newIndex,
        type: "",
        link: ""
      }
    ]
  }));
};

在 ReactJS 中动态添加/删除下拉列表

Dynamic Add / Remove of Dropdown in ReactJS

javascript

reactjs

react-select