react 飞冰 账号密码输入保存并加载

下午 3个小时 有点笨啊
不包含注册时的判断
有瑕疵 回头再修改吧

import * as React from 'react';
import {Card, Select, Button, Checkbox, Input, Dialog} from '@alifd/next';
import {useEffect, useState} from "react";

export default function MergeCellTable(props) {
  const [userInformation, setUserInformation] = useState({userName: '', passWord: '', flag: false})
  useEffect(() => {

  }, []);
  // 设置dialog弹出框
  const [dialogValue,setDialogValue] = useState(false);
  //  从本地存储中取出数据
  const jsonData = JSON.parse(window.localStorage.getItem('userArr'));
  // 数组初始赋值 如果有数据就赋值
  let userArr = jsonData ? jsonData : false;
  const userNameData = userArr ? userArr.map((item, i) => {
    console.log(item.userName);
    console.log(i);
    const name = item.userName;
    console.log(name)
    return {value: name, index: i};
  }) : [{}]

  // 选择事件进行判断是选择还是输入进行不同操作
  const onChange = (value, actionType, item, index) => {
    if (actionType === 'itemClick') {
      setUserInformation({userName: item.value, passWord: userArr[item.index].passWord, flag: true})
    } else {
      setUserInformation({...userInformation, userName: value})
    }
    if (item==='clear'){
      setDialogValue(true);
    }
  };
  // 存储账号密码
  const getPassWord = () => {
    // 判断是否重复
    if (JSON.stringify(userArr).indexOf(JSON.stringify(userInformation)) == -1) {
      userArr.push(userInformation);
      window.localStorage.setItem('userArr', JSON.stringify(userArr));
    }
  }

  return (
    <Card free>
      <div >
        <span>账号：</span>
        <Select.AutoComplete
          value={userInformation.userName}
          placeholder='请输入账号'
          onChange={onChange}
          dataSource={userNameData}
          hasClear
          style={{width:'200px'}}
        />
      </div>
      <div style={{marginTop:'10px'}}>
        <span>密码：</span>
        <Input.Password
          // type='password'
          style={{width:'200px'}}
          value={userInformation.passWord}
          placeholder='请输入密码'
          onChange={(value) => {
            setUserInformation({...userInformation, passWord: value})
          }}/></div>
      <div>
        <Checkbox
          checked={userInformation.flag}
          onChange={(value) => {
            setUserInformation({...userInformation, flag: value})
          }}>
          记住密码
        </Checkbox>
      </div>

      <div>
        <Button
          onClick={() => {
            if (userInformation.flag) {
              getPassWord();
            }
          }}
        >登录</Button>
      </div>
      <div>
        <Dialog
          visible={dialogValue}
          title={'是否删除该账号登录信息'}
          style={{width:'200px'}}
          onClose={()=>{
            setDialogValue(false);
          }}
          onCancel={()=>{
            setDialogValue(false);
          }}
          onOk={()=>{
            setDialogValue(false);
          }}
        >

        </Dialog>
      </div>
    </Card>
  );
}