javascript - react 终极版 : Problem with passing props and dispatch from container to component

Question

我有一个简单的工作 React-redux 应用程序，我试图更好地组织到不同的文件夹中，如下所示:

component1.js

import React from "react";
class Presentational extends React.Component {
    constructor (props){
      super(props);
      this.state= {
        input:''
      }
      this.handleChange= this.handleChange.bind(this)
      this.submitMessage= this.submitMessage.bind(this)
    }
    handleChange (event) {
      this.setState ({
        input:event.target.value
      })
    }

    submitMessage () {
      this.props.submitNewMessage(this.state.input);
      this.setState({
        input:''
      })
    }

    render(){
      return (
        <div>
          <h2> Type a new Message </h2>
          <input value={this.state.input} onChange={this.handleChange}/>
          <br/>
          <button onClick={this.submitMessage}>Submit</button>
          <ul>
          {this.props.messages.map((message,idx) =>{
            return <li key={idx}>{message}</li>
          })}
          </ul>
        </div>
      )
    }
  }

export default Presentational;

container1.js

import { connect } from 'react-redux'
import { addMessage } from '../actions'
import Presentational from '../components'

const mapStateToProps = state => {
    return {
      messages: state
    }
  }
  const mapDispatchToProps = dispatch => {
    return {
      submitNewMessage :message => {
        dispatch(addMessage(message))
      }
    }
  }

  export default connect(mapStateToProps,mapDispatchToProps)(Presentational)

虽然应用程序在所有 react-redux 代码都在 1 个文件中的原始应用程序中运行，但在将文件的逻辑分离到不同的文件夹后，应用程序崩溃并出现以下错误:

TypeError: Cannot read property 'map' of undefined

Uncaught TypeError: this.props.submitNewMessage is not a function

在我看来，container1.js 代码没有成功地为 component1.js 中的 Presentational 组件“将状态映射到 Prop ”和“将调度映射到 Prop ”。

知道我做错了什么吗？

Answer 1

您必须使用 container1.js 文件而不是 component1.js 文件，因为 component1 没有 Redux props，但 container1 有。

因此，您应该更改导入以使用 container1 文件或将 Redux prop 映射放入 component1.js 文件中