TypeError: невозможно прочитать свойство has of undefined

Question

У меня возникла ошибка, когда я попытался использовать два флажка одновременно в Reactjs. И я получил это сообщение об ошибке:

TypeError: Cannot read property 'has' of undefined
FormContainer.render
src/container/formcontainer.component.js:268
  265 | <label className="form-check-label">
  266 |   <input
  267 |     type="checkbox"
> 268 |     checked={this.state.departRelated.isExternal.has}
      | ^  269 |     onChange={this.onChangeExternal}
  270 |     className="form-check-input"
  271 |   />

Ниже мое приложение:

class FormContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newPost: {
        title: "",
        type: "",
        depart: "",
        selectedList: [],
        description: ""
      },
      departRelated: {
 
        isExternal: {
          has: false,
          name: "External"
        },
        isInternal: {
          have: false,
          name: "Internal"
        }
      };

onChangeExternal = () => {
    this.setState(initialState => ({
      departRelated: {
        isExternal: {
          has: !this.state.departRelated.isExternal.has
        }
      }
    }));
  };

  onChangeInternal = () => {
    this.setState(initialState => ({
      departRelated: {
        isInternal: {
          have: !this.state.departRelated.isInternal.have
        }
      }
    }));
  };

return (
<div className="form-check">
          <label className="form-check-label">
            <input
              type="checkbox"
              checked={this.state.departRelated.isExternal.has}
              onChange={this.onChangeExternal}
              className="form-check-input"
            />
            External
          </label>
        </div>
        <div className="form-check">
          <label className="form-check-label">
            <input
              type="checkbox"
              checked={this.state.departRelated.isInternal.have}
              onChange={this.onChangeInternal}
              className="form-check-input"
            />
            Internal
          </label>
          {/* <p>this box is {msg}.</p> */}
        </div>
)

Я показываю здесь только связанные части. Я должен сохранить как has (have), так и имя в поле leaveRelated, потому что я хочу сохранить имя (со значением has (have) == true) в моей базе данных позже. Я комментирую внешнюю часть, внутреннюю часть работает и наоборот. Но когда я применяю и внешнюю, и внутреннюю части, ничего не получается. Кто-нибудь знает почему ???

Answer 1

Вы должны применить некоторые проверки существования объекта / свойств, например, это

return (
<div className="form-check">
          <label className="form-check-label">
            <input
              type="checkbox"
              checked={(this.state.departRelated && this.state.departRelated.isExternal) ? this.state.departRelated.isExternal.has: false}
              onChange={this.onChangeExternal}
              className="form-check-input"
            />
            External
          </label>
        </div>
        <div className="form-check">
          <label className="form-check-label">
            <input
              type="checkbox"
              checked={(this.state.departRelated && this.state.departRelated.isExternal) ? this.state.departRelated.isInternal.have : false}
              onChange={this.onChangeInternal}
              className="form-check-input"
            />
            Internal
          </label>
          {/* <p>this box is {msg}.</p> */}
        </div>
)