Question

我是Redux的新手。理解基本语法真的很混乱。没有找到任何错误，所以很难弄清楚我的代码有什么问题。

上周运作良好，我不记得我改变了什么。

//子组件

import React, { Component } from 'react';
import { SingleDatePicker } from 'react-dates';
import moment from 'moment';

class InputForms extends Component {
  state = {
    inputs: ['input-0'],
    title: '',
    tag: '',
    createdAt: moment(),
    imageLinks: [''],
    calendarFocused: false,
    error: '',
  }
  appendInput(e) {
    const newInput = `input-${this.state.inputs.length}`;
    this.setState({ inputs: this.state.inputs.concat([newInput]) });
  }
  onTitleChange = (e) => {
    const title = e.target.value;
    this.setState(() => ({ title }));
  };
  onTagChange = (e) => {
    const tag = e.target.value;
    this.setState(() => ({ tag }));
  };
  onImageLinkChange = (e) => {
    const imageLinks = e.target.value;
    this.setState(() => ({ imageLinks: this.state.imageLinks.concat([imageLinks]) }));
  };
  onDateChange = (createdAt) => {
    if (createdAt) {
      this.setState(() => ({ createdAt }));
    }
  };
  onFocusChange = ({ focused }) => {
    this.setState(() => ({ calendarFocused: focused }));
  };
  onSubmit = (e) => {
    e.preventDefault();

    if (!this.state.title || !this.state.imageLinks) {
      this.setState(() => ({ error: '제목과 이미지링크를 입력해주세요' }));
    } else {
      this.setState(() => ({ error: '' }));
      this.props.onSubmit({
        title: this.state.title,
        tag: this.state.tag,
        createdAt: this.state.createdAt.valueOf(),
        imageLinks: this.state.imageLinks,
      });
    }
  }
  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input
            type="text"
            placeholder="제목을 입력하세요"
            required
            value={this.state.title}
            onChange={this.onTitleChange}
          />
          <input
            type="text"
            placeholder="태그를 입력하세요"
            value={this.state.tag}
            onChange={this.onTagChange}
          />
          <SingleDatePicker
            date={this.state.createdAt}
            onDateChange={this.onDateChange}
            focused={this.state.calendarFocused}
            onFocusChange={this.onFocusChange}
            numberOfMonths={1}
            isOutsideRange={() => false}
          />
          {this.state.inputs.map((input, key) => {
            return <input
              key={input}
              type="text"
              required
              value={this.state.imageLinks}
              onChange={this.onImageLinkChange}
              placeholder={`이미지링크 ${key + 1}`}
            />
          })}
          <button>저장</button>
        </form>
      </div>
    )
  }
}
export default InputForms;

//父组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import configureStore from '../store/configureStore';
import InputForms from './InputForms';
import { addPost } from '../actions/posts';

const store = configureStore();

class CreatePost extends Component {
  onSubmit = (post) => {
    this.props.addPost(post);
    this.props.history.push('/');
  };
  render(){
    return(
      <div>
        <InputForms onSubmit={this.onSubmit}/>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch, props) => ({
  addPost: (post) => dispatch(addPost(post))
});

export default connect(undefined, mapDispatchToProps)(CreatePost);

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import registerServiceWorker from './registerServiceWorker';
import AppRouter from './routers/AppRouter';
import 'normalize.css/normalize.css';
import './style/style.css';
import 'react-dates/lib/css/_datepicker.css';
import 'react-dates/initialize';

const store = configureStore();
const jsx = (
    <Provider store={store}>
        <AppRouter />
    </Provider>
);

ReactDOM.render(jsx, document.getElementById('root'));
registerServiceWorker();

//动作从'../ firebase / firebase'导入数据库;

//Add Posts
export const addPost = (post) => ({
    type: 'ADD_POST',
    post
});

//减速器

const postReducerDefaultState = [];

export default (state = postReducerDefaultState, action) => {
    switch (action.type) {
        case 'ADD_POST':
            return [
                ...state,
                action.post
            ];
        default:
            return state;
    }
};

Answer 1

在您的减速机中，您将返回如下

return [ ...state, action.post];

Reducer不返回数组，而是返回对象。其次，action.post是一个值，您需要将其分配给键，如下所示：

return { ...state, post: action.post };

Redux未获取任何数据

1 个答案: