Question

我正在尝试将输入字段中的值推送到firebase应用。我已设法从中获取数据，但我似乎无法理解提交功能。我觉得我错过了一些非常简单的事情。当我尝试使用savePost时，它表示它不是一个功能。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { savePost } from '../actions/index';

class AddPost extends Component {
  constructor(props) {
    super(props);
    this.state= {
      title: '',
      body: ''
    }
    this.onChangeTitle = this.onChangeTitle.bind(this)
    this.onChangeBody = this.onChangeBody.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
  }
  
  onChangeTitle(e){
    this.setState({
      title: e.target.value,
    })
  }
  onChangeBody(e){
    this.setState({
      body: e.target.value,
    })
  }
  onSubmit(e, values) {
    e.preventDefault();
    savePost(this.state)
  }
 
  render() {

    return (
      <div className="container">
       <form onSubmit={this.onSubmit.bind(this)}>
       <input value={this.state.title} onChange={this.onChangeTitle}  type="text" name="title" />
       <input value={this.state.body} onChange={this.onChangeBody} type="text" name="body"/>
       <button type="submit">Post</button>
       </form>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  savePost: dispatch(savePost())
});

export default connect(undefined, mapDispatchToProps)(AddPost);

#set (TEST_VAL OFF) #uncomment this to force set this value
option(TEST_VAL "Test my value")
if(NOT ${TEST_VAL} EQUAL OFF)
    message(WARNING "TEST MY VAL IS NOT EQUAL OFF ACTUAL VALUE: ${DISABLE_SSE} ")
else ()
    message(WARNING "TEST MY VAL IS ON ACTUAL VALUE: ${DISABLE_SSE} ")
endif()

Answer 1

当我将mapDispatchToProps更改为：

时，它有点奏效

const mapDispatchToProps = () => {
  return {
    savePost: savePost
  };
};

Answer 2

在onSubmit(e, values)函数中，您正在调用savePost(this.state)，它实际上正在调用您在文件顶部导入的函数。

以下代码将该函数添加到组件的props：

const mapDispatchToProps = dispatch => ({
    savePost: dispatch(savePost())
});

所以你需要做

onSubmit(e, values) {
  e.preventDefault();
  this.props.dispatch(savePost(this.state))
}

Answer 3

将其更改为 const mapDispatchToProps = dispatch => ({ savePost: foo => dispatch(savePost(foo)) });

并且在函数中，它应该是this.props.savePost(this.state.foo)

使用react / redux将数据发送到firebase

3 个答案: