Как я могу исправить проблему с React (компонент меняет контролируемый вход типа undefined, чтобы быть неуправляемым.)?

Question

Я переделал свою заявку. Когда вы нажимаете на кнопку, должно появиться модальное окно, но оно выдает ошибку «Компонент меняет контролируемый вход типа undefined на неконтролируемый. Элементы ввода не должны переключаться с контролируемого на неуправляемый (или наоборот). использование контролируемого или неконтролируемого элемента ввода для времени жизни компонента. "

HiddenFormState. js:

    let Formdates = {
    OnNameChanged:"",
    OnEmailChanged:"",
    OnPhoneChanged:"",
    OnMessageChanged:"",
    isFormVisible:false
}
const FormState = (state = Formdates, action) => {
    switch (action.type) {
        case 'FormState' :
            return !{...state,isFormVisible:{...state.isFormVisible}};
        case "OnNameChangedHidden":
            return {...state,OnNameChanged:action.NewText}
        case "OnEmailChangedHidden":
            return {...state,OnEmailChanged:action.NewText}
        case "OnPhoneChangedHidden":
            return {...state,OnPhoneChanged:action.NewText}
        case "OnMessageChangedHidden":
            return {...state,OnMessageChanged:action.NewText}
        case 'FormSendHidden' :
            return !state;
        default :
            return {...state};
    }
};
export let HiddenForm =()=> ({
    type: "FormState"
})
export let OnNameChangedCreator = (NewText) => ({
    type: "OnNameChangedHidden",
    NewText:NewText
})
export let SendForm = () => ({
    type: "SendFormHidden"
})
export let OnMessageChangedCreator  = (NewText) => ({
    type: "OnMessageChangedHidden",
    NewText:NewText
})
export let OnPhoneChangedCreator  = (NewText) => ({
    type: "OnPhoneChangedHidden",
    NewText:NewText
})
export let OnEmailChangedCreator = (NewText) => ({
    type: "OnEmailChangedHidden",
    NewText:NewText
})
export default FormState;

Компонент контейнера:

import {connect} from "react-redux";
import MainFirst from "./main-first";
import  {
    HiddenForm, OnEmailChangedCreator,
    OnMessageChangedCreator,
    OnNameChangedCreator,
    OnPhoneChangedCreator
} from "../../store/hiddenFormState";

let MapStateToProps=state=>{
    return{
        Name:state.FormState.OnNameChanged,
        Email:state.FormState.OnEmailChanged,
        Phone:state.FormState.OnPhoneChanged,
        Message:state.FormState.OnMessageChanged,
        IsFormVisible:state.FormState.IsFormVisible
    }
}
let MainFirstContainer = connect(MapStateToProps, {HiddenForm,OnPhoneChangedCreator,OnNameChangedCreator,OnEmailChangedCreator,OnMessageChangedCreator})(MainFirst)
export default MainFirstContainer

Компонент:

import React from "react";
import "./../../css/App.css";
import Main1 from "./../../Images/Main1.jpg";
import HiddenForm from "./hidden-form.js";
class MainFirst extends React.Component {
  render() {
    return (
      <section>
        <div className="firstMain">
          <div className="cover" />
          <div className="firstMain-block">
            <h1>text</h1>
            <p>text</p>
            <button id="b" onClick={this.props.HiddenForm}>text</button>
            <button id="s" onClick={this.props.HiddenForm}>text</button>
          </div>
          <img className="Main1" src={Main1} alt="" />
        </div>
        <div className={(this.props.IsFormVisible)? "visible-form Chagebleform":"hidden-form Chagebleform"}>
          <HiddenForm OnNameChangedCreator={this.props.OnNameChangedCreator}
                      OnMessageChangedCreator={this.props.OnMessageChangedCreator}
                      OnPhoneChangedCreator={this.props.OnPhoneChangedCreator}
                      OnEmailChangedCreator={this.props.OnEmailChangedCreator}
                      Name={this.props.Name}
                      Email={this.props.Email}
                      Phone={this.props.Phone}
                      Message={this.props.Message} HiddenForm={this.props.HiddenForm}/>
        </div>
      </section>
    );
  }
}
export default MainFirst;

css:

.Chagebleform {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    overflow: hidden;
    top: 0;
    animation: fadeIn ease .5s;
    -webkit-animation: fadeIn ease .5s;
    -moz-animation: fadeIn ease .5s;
    -o-animation: fadeIn ease .5s;
    -ms-animation: fadeIn ease .5s;
    text-align: center;
}

.hidden-form {
    display: none;
}
.visible-form {
    display: block;
}

Answer 1

Для всех, кто ищет ответ на этот вопрос: Если вы получаете эту ошибку при использовании response / redux, проверьте ваши редукторы. Обычно, когда я сталкиваюсь с этой ошибкой, это происходит из-за какой-то глупой ошибки, которую я сделал в сложном выражении return редуктора.

Пример недавней ошибки для меня:

case ActionTypes.SET_RUNE_DETAILS:
  return {
    ...state,
    tiers: state.tiers.map((tier, tierId) =>
      tierId === action.payload.tierId
        ? {
            ...tier,
            runes: state.tiers.map((rune, id) =>
              id === action.payload.id ? { ...rune, detail: action.payload.value } : rune,
            ),
          }
        : tier,
    ),
  }

This бросил ошибку, о которой идет речь. Ответ состоял в том, чтобы изменить одну строку:

case ActionTypes.SET_RUNE_DETAILS:
  return {
    ...state,
    tiers: state.tiers.map((tier, tierId) =>
      tierId === action.payload.tierId
        ? {
            ...tier,
            runes: tier.runes.map((rune, id) =>
              id === action.payload.id ? { ...rune, detail: action.payload.value } : rune,
            ),
          }
        : tier,
    ),
  }

В 1-й версии редуктор пытался изменить значение неправильного атрибута в состоянии, вызывая сообщение об ошибке.

В случае OP, я вижу пару ошибок в редукторе

1. case 'FormSendHidden' : return !state;

2. return !{...state,isFormVisible:{...state.isFormVisible}};

Answer 2

У вас есть ошибка в редукторе, когда вы инвертируете видимость формы. Попробуйте это:

case 'FormState':
  return {
    ...state,
    isFormVisible: !state.isFormVisible
  }