FAB 编辑按钮打开模式，但是当单击选择值时，它会关闭模式

Question

3.19.22

IT-Logger 应用程序问题

作者 Greg Petropoulos

问题陈述：

当经过身份验证的用户将鼠标悬停在 FAB 上时，会出现黑色编辑按钮，单击该按钮即可显示模式并选择要编辑的日志。

1. 选择日志后，模式将关闭，必须手动重新打开才能查看所选的日志。

2. 如果用户决定选择另一个日志，则所选日志不会改变。

3. 我无法推断是否物化库导致了问题或 useEffect 与 React 的使用不当。

设备：

macOS Big Sur 版本 11.4、MacBook Pro（13 英寸、M1、2020）

浏览器：

Google Chrome 版本 97.0.4692.99（官方版本）(arm64)

凭据：

用户是 [电子邮件受保护]

密码是密码

预期结果：

经过身份验证的用户将鼠标悬停在 FAB 上，然后单击黑色编辑按钮，然后将打开一个模式。用户选择他们想要编辑的日志，如果不是所需的日志，则用户可以选择不同的日志进行编辑。选择要编辑的日志后，用户可以在文本字段中进行编辑并提交更改。提交后该模式将关闭

实际结果：

经过身份验证的用户将鼠标悬停在 FAB 上并单击黑色编辑按钮，编辑模式打开，用户选择日志，然后模式关闭。用户必须再次打开模式才能查看所选日志，然后模式保持打开状态以进行编辑和提交。如果用户改变主意并想要选择不同的日志进行编辑，则 UI 不会发生任何变化。

失败的尝试解决了问题

• 我尝试移动 html 顺序，认为顺序很重要

• 使用 e.stopPropogation 应用 onClick 处理程序

• 使用 e.stopImmediatePropogation 应用 onClick 处理程序

• 更改值

• 更改了useEffect

• 将记录的结构更改为数组和对象

成功的尝试

我能够对选择标签和选项进行硬编码以使其发挥作用，尽管没有应用任何状态，并且这不会是在任何给定时间未确定的日志数组的解决方案

注意：

这应用程序由 it-logger 和 contact-keeper 组成。我将所有内容迁移到 redux 并构建了一个后端（没有 jsonwebserver）。我正在使用本地状态来处理 ui 更改和表单提交以及 redux（如果适用）。我已更新到 React router dom v6。

请参阅 GitHub 存储库和已部署网站 Github 的链接

：https://github.com/GregPetropoulos/IT-Logger-App

主页图片

带有下拉选择的模式图片

网站：https://it-loggerv1.herokuapp.com/

[电子邮件受保护]

密码=密码

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import M from 'materialize-css/dist/js/materialize.min.js';
import 'materialize-css/dist/css/materialize.min.css';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { updateLog } from '../../actions/logActions';
import { setCurrent } from '../../actions/logActions';
import Preloader from '../layout/Preloader';
import formatDate from '../../utils/formatDate';
 
const EditTechLogModal = ({
  setCurrent,
  log: { logs, loading, current },
  updateLog,
  auth: { tech }
}) => {
  // LOCAL STATE UPDATES CURRENT
  const [logged, setLogged] = useState('');
  const [message, setMessage] = useState('');
  const [attention, setAttention] = useState(false);
 
  // When click on the log it renders the current info via local state set to backend server info because of connect and mapStateTopProps
  console.log('logged', logged);
  console.log('logged true', logged === true);
  console.log('logged null', logged === null);
  console.log('logged ""', logged === '');
  console.log('logged typeof', typeof logged);
  // console.log('log loading', loading);
  // console.log('tech', tech);
  console.log('logs', logs);
  console.log('current', current);
  console.log('current type of', typeof current);
  console.log('message', message);
  console.log('setCurrent', setCurrent);
 
  console.log(' attention', attention);
  useEffect(() => {
    M.AutoInit();
  }, []);
 
  useEffect(() => {
    console.log('useEffect for setCurrent in edit tech');
 
    setCurrent(logged);
  }, [logged]);
 
  useEffect(() => {
    console.log('useEffect for setMessage and setAttention in edit tech');
    if (current) {
      setMessage(current.message);
      setAttention(current.attention);
    }
  }, [current]);
 
  const onChange = (e) => {
    const idValue = e.target.value;
    console.log('idvalue', idValue);
    if (onChange) {
      let isMatch = logs.filter((log) => log._id === idValue);
      console.log('ismATCH type', typeof isMatch);
      console.log('ismATCH', isMatch);
      setLogged(...isMatch);
    }
    //   if (e.target === e.currentTarget) {
    //     e.stopPropagation();
    // }
  };
 
  const onSubmit = (e) => {
    e.preventDefault();
    // logged===null
    if (message === '') {
      M.toast({ html: 'Please enter a message' });
    } else {
      // * SET UP AN OBJECT
      const updLog = {
        id: current._id,
        message,
        attention,
        tech: current.tech._id,
        date: new Date()
      };
      // * CALL THE updateLog ACTION/PROP AND PASS IN updLog
      updateLog(updLog);
      M.toast({ html: `Log updated by ${tech.firstName}` });
      console.log('updloG', updLog);
    }
 
    // Clear fields
    setMessage('');
    setLogged('');
    setAttention(false);
  };
 
  // if (logs === null) {
  //   console.log('preload');
  //   return <Preloader />;
  // }
  console.log('EDIT-LOG-CHECK');
 
  return (
    <div id='edit-log-modal' className='modal' style={modalStyle}>
      <div className='modal-content'>
        <h4>Edit System Logs</h4>
        {tech !== null && (
          <div className=''>
            {tech.firstName} {tech.lastName}
            <p>Tech ID# {tech._id}</p>
          </div>
        )}
        {logs !== null && (
          <div className='row'>
            <p className='title'>Choose an existing Log</p>
            <div
              // onSelect={(e) => e.stopPropagation()}
 
              className='input-field'>
              <select
                className='browser-default wrapper'
                onChange={onChange}
                value={logged}>
                <option value='' disabled>
                  Select Log
                </option>
 
                {logs.map(
                  (optionLog) =>
                    optionLog.tech._id === tech._id && (
                      <option
                        key={optionLog._id}
                        multiple={true}
                        value={`${optionLog._id}`}>
                        Log ID#: {optionLog._id}
                        Logged Date: {formatDate(optionLog.date)}
                      </option>
                    )
                )}
              </select>
            </div>
          </div>
        )}
        <div className='row'>
          <div className='input-field'>
            Message:
            <textarea
              type='textarea'
              name='message'
              value={message}
              onChange={(e) => setMessage(e.target.value)}
            />
          </div>
        </div>
        <div className='row'>
          <div className='input-field'>
            <p>
              <label>
                <input
                  type='checkbox'
                  className='filled-in'
                  checked={attention}
                  value={attention}
                  onChange={(e) => setAttention(!attention)}></input>
 
                <span>Needs Attention</span>
              </label>
            </p>
          </div>
        </div>
      </div>
      <div className='modal-footer'>
        <a
          href='#!'
          onClick={onSubmit}
          className='modal-close waves-effect blue btn'>
          Enter
        </a>
      </div>
    </div>
  );
};
 
const modalStyle = {
  width: '75%',
  height: '75%'
};
 
EditTechLogModal.propTypes = {
  // current: PropTypes.object.isRequired,
  updateLog: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};
 
const mapStateToProps = (state) => ({
  log: state.log,
  auth: state.auth
});
 
export default connect(mapStateToProps, { setCurrent, updateLog })(
  EditTechLogModal
);

这是我的第一篇堆栈溢出帖子。我感谢所有有益的努力。感谢您的阅读和您的时间！