Question

我想通过反应显示可能 api-call 的结果。我的api返回一个JSON对象：

0:{produkt_id: 1, produktname: "Bauernbrot", preis: "4"}
1:{produkt_id: 2, produktname: "Nussbrot", preis: "4.50"}
2:{produkt_id: 3, produktname: "Dinkelbrot", preis: "4.20"}

如果我的反应组件看起来像这样：

  constructor() {
    super();
    this.state = {
      bread: ' '
    };
  }

 componentDidMount(){
    axios
      .post('/api/produkte')
      .then((res)=> {
        console.log(res.data);
        this.setState(
          { bread: res.data.produkte[0].produktname }
        );
      })
      .catch((err)=> {})
  }
render(){
    return (
      <div>
        <h1>{this.state.bread}</h1>
      </div>
    );
}

当我使用Redux时，我想用redux-action发出请求。此操作应更新我的产品＆＃34;在我的redux商店中，我将在我的反应组件中显示。不幸的是，我无法正常工作。

这是我的行动：

import axios from 'axios';
import { GET_PRODUCTS } from './types';

export function setProducts(products) {
  return {
    type: GET_PRODUCTS,
    products
  };
}

export function updateProducts() {
  return (dispatch) => {
    return axios
    .post('/api/produkte')
    .then( res => {
      console.log(res);
      dispatch(setProducts(res.data.produkte[0].produktname));
    })
    .catch((err)=> {})
  }
}

我的减速机（在减速机中导入）：

import {GET_PRODUCTS} from '../actions/types';

const initialState = {
  products: {}
};

export default (state=initialState,action = {}) => {
  switch(action.type){
    case GET_PRODUCTS:
      return {
        products: action.products
      }
    default: return state;
  }
}

如果我调用我的函数＆＃34; updateProducts（）＆＃34;在我的react组件的构造函数中，我看不到在我的redux商店中执行的操作。：（

Answer 1

import React from 'react';
import { connect } from 'react-redux';
import BestellForm from './BestellForm';
import { updateProducts } from '../../redux/actions/getProducts';

class BestellSeite extends React.Component {
  render() {
    return (
      <BestellForm updateProducts={updateProducts}/>
    );
  }
}

export default connect (null, { updateProducts })(BestellSeite);

和

import React, { Component } from 'react';
import './bestellSeite.css';
import moment from 'moment';
import axios from 'axios';

export default class BestellForm extends Component {

  constructor() {
    super();
    this.state = {
      bread: ' '
    };
  }
  componentWillMount() {
    this.props.updateProducts();
  }

}

Answer 2

  componentWillMount() {
    this.props.dispatch(updateProducts());
  }

做了这个伎俩

显示Axios-Response

2 个答案: