Как исправить ошибку «Инвариантное нарушение» в React

Question

Я пытаюсь создать простой сайт, использующий React-Redux, чтобы попрактиковаться в использовании React и Redux и соединить их.Весь HTML это просто div с id = "container" для получения конечного компонента из ReactDOM.render в конце кода.

// Redux
const defaultState = {
  input: ""
}

const updateView = (event) => {
  return {
    type: "UPDATE",
    input: event.target.value
  }
}

const reducer = (state = defaultState, action) => {
  switch(action.type) {
    case "UPDATE":
      return {
        input: action.input
      }
    default:
      return state
  }
}

const store = Redux.createStore(reducer);

// React Redux
const connect = ReactRedux.connect;
const Provider = ReactRedux.Provider;

// React
class Presentational extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    dispatch(this.props.submitUpdate(event));
  }
  render() {
    return (
      <div>
        <textarea cols="40" rows="10" value={this.props.input} onChange={this.handleChange}/>
        <div id="preview"></div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    input: state.input
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    submitUpdate: function(event) {
      dispatch(updateView(event));
    }
  }
}

const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    <Provider store={store}>
      <Container/>
    </Provider>
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

В конце концов я хочу, чтобы это стало средством предварительного просмотра уценки, носейчас я ожидаю, что он отобразит текстовую область, которую я смогу ввести, и за кулисами он должен изменить свойство ввода состояния, чтобы я мог получить к нему доступ позже.Вместо этого он ничего не рендерит и выдает:

[object Error] {
    framesToPop: 1,
    name: "Invariant Violation"
}

Answer 1

Ну, проблема в вашем App компоненте.Вы пропустили return, поэтому метод рендеринга по умолчанию возвращает undefined, и именно это является причиной ошибки, которую вы видите.Другим исправлением будет удаление dispatch, которое даст вам ошибку runttime после исправления отсутствующего возврата в компоненте App.

Исправленный App компонент:

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Provider store={store}>
        <Container />
      </Provider>
    );
  }
}

И dispatch(this.props.submitUpdate(event)); должно быть this.props.submitUpdate(event); внутри Presentational компонента handleChange.

Полный рабочий код:

index.js

// Redux
const defaultState = {
  input: ""
};

const updateView = event => {
  return {
    type: "UPDATE",
    input: event.target.value
  };
};

const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case "UPDATE":
      return {
        input: action.input
      };
    default:
      return state;
  }
};

const store = Redux.createStore(reducer);

// React Redux
const connect = ReactRedux.connect;
const Provider = ReactRedux.Provider;

// React
class Presentational extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.props.submitUpdate(event);
  }
  render() {
    return (
      <div>
        <textarea
          cols="40"
          rows="10"
          value={this.props.input}
          onChange={this.handleChange}
        />
        <div id="preview" />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    input: state.input
  };
};

const mapDispatchToProps = dispatch => {
  return {
    submitUpdate: function(event) {
      dispatch(updateView(event));
    }
  };
};

const Container = connect(
  mapStateToProps,
  mapDispatchToProps
)(Presentational);

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Provider store={store}>
        <Container />
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/react-redux@6.0.0/dist/react-redux.js"></script>

    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="https://unpkg.com/redux@4.0.1/dist/redux.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel" src="index.js"></script>
  </body>
</html>