Javascript 关闭模式时显示错误消息

目标：
将state.firstName用于与查看模式相关的displayModalContent

问题：
当我打开一个模态然后想关闭它时，会显示一个错误“无法读取null的属性'firstName'

我不知道为什么会发生这种错误，你如何解决它

信息：
*我是个新手

Stackblitz:
?

谢谢大家!

---

---

问题出现在displayModalContent文件中，您试图在该文件中设置componentDidUpdate中的状态。当您关闭模式时，将调用componetDidUpdate，此时，该项将为null，并且您正在尝试获取null值的属性。因此，如果您只想在组件安装时设置一次数据，您可以使用componentDiDMount，或者您可以使用可选的chaining（），以便在没有来自道具的对象时不会中断应用程序

componentDidUpdate(s) {
    if (JSON.stringify(this.props) !== JSON.stringify(s)) {
      this.setState({ openItem: this.props.item });
      this.setState({ firstName: this.props.item?.firstName });
      this.setState({ lastName: this.props.item?.lastName });
    }
  }

---

错误发生在哪一行？所有操作都从'this.handleCloseModal'开始，对吗？但哪一行实际抛出错误？编辑：我现在在Stackblitz上看到了。对于正在发生的事情，答案是正确的。错误消息/堆栈跟踪为您展示了这一点，确切地说是哪一行引起的。

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import Modal from 'react-modal';
import Select from 'react-select';

const options = [
  { value: 1, label: 'Jan' },
  { value: 2, label: 'Feb' },
  { value: 3, label: 'Mars' },
  { value: 4, label: 'April' },
  { value: 5, label: 'May' },
  { value: 6, label: 'June' },
  { value: 7, label: 'July' },
  { value: 8, label: 'August' },
  { value: 9, label: 'Sept' },
  { value: 10, label: 'Oct' },
  { value: 11, label: 'Nov' },
  { value: 12, label: 'Dec' }
];

class displayModalContent extends Component {
  constructor() {
    super();

    this.state = {
      openItem: null,
      firstName: '',
      lastName: ''
    };
  }

  componentDidUpdate(s) {
    if (JSON.stringify(this.props) !== JSON.stringify(s)) {
      this.setState({ openItem: this.props.item });
      this.setState({ firstName: this.props.item.firstName });
      this.setState({ lastName: this.props.item.lastName });
    }
  }

  handleOpenModal = openItem => {
    this.setState({ openItem });
  };

  handleCloseModal = () => {
    this.setState({ openItem: null });

    this.setState({ firstName: '' });

    if (this.props.onClose) {
      this.props.onClose();
    }
  };

  handleOpenItemValue = e => {
    let { name, value } = e.target;

    this.setState({
      openItem: { ...this.state.openItem, [name]: value }
    });

    this.setState({ firstName: value });
  };

  handleOpenItemValue2 = e => {
    let { name, value } = e.target;

    this.setState({
      openItem: { ...this.state.openItem, [name]: value }
    });

    this.setState({ lastName: value });
  };

  handleSubmit = () => {
    console.log(document.getElementsByName('startMonth')[0].value);
    alert(
      JSON.stringify({
        test: document.getElementsByName('startMonth')[0].value,
        firstName: this.state.firstName,
        lastName: this.state.lastName
      })
    );
  };

  render() {
    const { items, openItem } = this.state;

    return (
      <div>
        {openItem !== null && (
          <Modal className="confirmation-modal" isOpen={true}>
            First Name:
            <br />
            <input
              type="text"
              id="firstName"
              name="firstName"
              value={openItem.firstName}
              onChange={e => this.handleOpenItemValue(e)}
            />
            <input
              type="text"
              id="lastName"
              name="lastName"
              value={openItem.lastName}
              onChange={e => this.handleOpenItemValue2(e)}
            />
            <Select
              defaultValue={options.find(
                option => option.value === openItem.startMonth
              )}
              name="startMonth"
              id="testaaa"
              options={options}
            />
            <button onClick={this.handleCloseModal}>Close Modal</button>
            <button onClick={this.handleSubmit}>Test</button>
          </Modal>
        )}
      </div>
    );
  }
}

export default displayModalContent;

h1,
p {
  font-family: Lato;
}

.confirmation-overlay.ReactModal__Overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.confirmation-overlay.ReactModal__Overlay--after-open {
  opacity: 1;

  transition: opacity 300ms ease-out;
}

.confirmation-modal.ReactModal__Content {
  position: absolute;

  top: 25%;
  left: 50%;
  width: 500px;
  right: auto;
  bottom: auto;
  border: 1px solid #eee;
  margin-right: -50%;
  transform: scale(0);
  background-color: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  outline: none;
  padding: 20px;
  opacity: 0;
}

.confirmation-modal.ReactModal__Content--after-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: all 300ms ease-out;
}

.confirmation-modal button {
  border: 1px solid black;
  background-color: #fff;
  color: #333;
  padding: 4px 8px;
  margin: 4px;
  border-radius: 3px;
  cursor: pointer;
}

.confirmation-modal button:hover {
  background-color: #eee;
}

componentDidUpdate(s) {
    if (JSON.stringify(this.props) !== JSON.stringify(s)) {
      this.setState({ openItem: this.props.item });
      this.setState({ firstName: this.props.item?.firstName });
      this.setState({ lastName: this.props.item?.lastName });
    }
  }