मैंने इस कोड के हर संभव बदलाव की कोशिश की, लेकिन मैं वास्तव में एपीआई को अपने डेटा स्टोर में लाने का प्रबंधन नहीं करता। मैं बिल्कुल फंस गया हूं और कुछ मदद की सराहना करता हूं। मुझे लगता है कि मुझे इस निर्माण का अनिवार्य हिस्सा नहीं मिला है और मैं वास्तव में यह समझना चाहूंगा कि यह कैसे ठीक से काम करता है।

डेटा इस तरह दिखता है - यह मूल रूप से कुछ नेस्टेड तत्वों के साथ एक साधारण JSON (django Restframework API से) है:

संपादित करें २ (JSON को axios API/Redux क्रिया के स्क्रीनशॉट में बदला गया) डेटा प्रकार

माई रेडक्स एक्शन - पूरी तरह से ठीक काम करता है। कंसोल.लॉग ऊपर से बिल्कुल डेटा खींचता है (सही इनपुट के साथ):

    // ./action/plan.js 

import axios from 'axios';

    export function fetchBudgets(){
      return function(dispatch){
        axios.get("/api/budgets/")
        .then((response) => {
          console.log(response)
          dispatch({ type: "FETCH_BUDGETS", budgets: response.data})
        })
        .catch((err) => {
          dispatch({type: "FETCH_DATA_REJECTED", budgets: err})
        })
      }
    }

तो अब तक सब कुछ ठीक लगता है। समस्याएं रेड्यूसर से शुरू होती हैं - क्योंकि मुझे यकीन नहीं है कि नेस्टेड डेटा का उपयोग करने के लिए रेड्यूसर को कैसे मॉडल किया जाए।

मेरा रेड्यूसर:

       // ./reducer/plan.js

        const initialState = {}


export default function budgets(state=initialState, action) {


    switch (action.type) {

        case 'FETCH_BUDGETS':
        console.log(action)
            return {
                    ...state,
                        id: action.budgets.id,
                        value_jan: action.budgets.value_jan,
                        value_feb: action.budgets.value_feb,
                        value_mar: action.budgets.value_mar,
                        value_apr: action.budgets.value_apr,
                        value_may: action.budgets.value_may,
                        value_jun: action.budgets.value_jun,
                        value_jul: action.budgets.value_jul,
                        value_aug: action.budgets.value_aug,
                        value_sep: action.budgets.value_sep,
                        value_oct: action.budgets.value_oct,
                        value_nov: action.budgets.value_nov,
                        value_dec: action.budgets.value_dec,
                        p_version: action.budgets.p_version,
                        entry_time: action.budgets.entry_time,
                        campaign: {
                            ...state.campaign, ...action.budgets.campaign
                        },
                        segment: {
                            ...state.segment, ...action.budgets.segment
                        },
                        touch_point: {
                            ...state.touch_point, ...action.budgets.touch_point
                        },
                        year: {
                            ...state.year, ...action.budgets.year
                        },
                        user: {
                            ...state.user, ...action.budgets.user
                        }
                    }

        default:
            return state
    }



}

मैं पहले से ही यहां डेटा प्रदर्शित नहीं कर सकता - इसलिए this.props.fetchBudgets() कोई डेटा प्राप्त नहीं कर रहा है।

मेरा .jsx ऐप

//./container/PlanContainer.jsx

      import React, { Component } from 'react';
    import {connect} from 'react-redux';


    import BootstrapTable from 'react-bootstrap-table-next';
    import cellEditFactory from 'react-bootstrap-table2-editor';

    import 'jquery';
    import 'popper.js'
    import 'bootstrap';
    import 'underscore'
    import _ from 'lodash'


    import {plan} from "../actions";


    const columns = [
                          { dataField: 'id', text: 'ID', hidden: true}, 
                          { dataField: 'year', text: 'Year', editable: false}, 
                          { dataField: 'segment', text: 'Segment', editable: false},
                          { dataField: 'campaign.name',text: 'Campaign', editable: false},
                          { dataField: 'touch_point',text: 'Touchpoint', editable: false},
                          { dataField: 'value_jan',text: 'Jan'},
                          { dataField: 'value_feb',text: 'Feb'},
                          { dataField: 'value_mar',text: 'Mar'},
                          { dataField: 'value_apr',text: 'Apr'},
                          { dataField: 'value_may',text: 'May'},
                          { dataField: 'value_jun',text: 'Jun'},
                          { dataField: 'value_jul',text: 'Jul'},
                          { dataField: 'value_aug',text: 'Aug'},
                          { dataField: 'value_sep',text: 'Sep'},
                          { dataField: 'value_oct',text: 'Oct'},
                          { dataField: 'value_nov',text: 'Nov'},
                          { dataField: 'value_dec',text: 'Dec'},
                          { dataField: 'user',text: 'User'},
                        ];

    const RemoteCellEdit = (props) => {

      const { columns, data, keyField } = props

      const cellEdit = {
        mode: 'click',
        errorMessage: props.errorMessage,
        blurToSave: true
      };

      return (
        <div>
          <BootstrapTable
            remote={ { cellEdit: true } }
            keyField = { keyField }
            data={ data }
            columns={ columns }
          />


        </div>
      );
    };

    class PlanContainer extends React.Component {

      componentDidMount() {

        this.props.fetchBudgets();
        console.log(this.props.fetchBudgets())

      }




      render() {
        return (
          <div>
          <RemoteCellEdit
            data={ this.props.budgets }
            columns = { columns }
            keyField = 'id'
          />



        </div>
        );
      }
    }


    const mapStateToProps = state => {
        return {
            budgets: state.budgets,
        }
    }

    const mapDispatchToProps = dispatch => {
      return {
        fetchBudgets: () => {
          dispatch(plan.fetchBudgets());
        },
      }
    }



    export default connect(mapStateToProps, mapDispatchToProps)(PlanContainer);

अंत में, मेरा स्टोर - कंसोल के अनुसार। लॉग कुछ भी नहीं हो रहा है:

// .Planning.jsx    

import React from "react"
    import { hot } from 'react-hot-loader'
    import { render } from "react-dom"
    import {
      createStore,
      compose,
      applyMiddleware,
      combineReducers,
    } from "redux"
    import { Provider } from "react-redux"
    import thunk from "redux-thunk"

    import PlanContainer from "./containers/PlanContainer"
    import reducerApp from "./reducers";
    import Sidebar from "./components/Sidebar"

    import axios from 'axios';
    import axiosMiddleware from 'redux-axios-middleware';



    let store = createStore(reducerApp, applyMiddleware(thunk, axiosMiddleware(axios)));

    console.log(store)

    class Planning extends React.Component {
      render() {
        return (

          <Sidebar>
            <Provider store={store}>
              <PlanContainer />
            </Provider>
          </Sidebar>

        )
      }
    }

    render(<Planning />, document.getElementById('Planning'))

फिर से, मैं सराहना करूंगा क्योंकि मैं इस मुद्दे पर काफी समय से अटका हुआ हूं और मैं वास्तव में यह समझना चाहता हूं कि इसे ठीक से कैसे किया जाए।

संपादित करें: यहां मेरे ब्राउज़र का एक स्क्रीनशॉट है: पहला तत्व स्टोर है, दूसरा .jsx ऐप में, तीसरा एक्शन (जो बिल्कुल ठीक दिखता है) और रेड्यूसर में एक्शन का चौथा हिस्सा है। Store, jsx, action, reducer

0
cesco 2 जुलाई 2018, 15:37

1 उत्तर

सबसे बढ़िया उत्तर

PlanContainer गड़बड़ है। ऐसे:

componentDidMount() {
    this.budgets = this.props.fetchBudgets();   
  }

this.budgets, this.props.fetchBudgets() द्वारा लौटाए गए मान की ओर इशारा कर रहा है, जो इस मामले में, एक वादा है, न कि वास्तविक डेटा।

state = {
      data: this.budgets
    };

state अब वादा करता है, डेटा नहीं।

render() {
    return (
      <div>
      <RemoteCellEdit
        data={ this.state.data }
        ...
  }

तो data यहां वास्तविक डेटा नहीं बल्कि वादा है।

भ्रम इसलिए हो रहा है क्योंकि आप रिडक्स स्टेट को रिएक्ट स्टेट के साथ मिला रहे हैं। एक या दूसरे का उपयोग करें, दोनों का नहीं (इसमें कुछ अपवाद हैं लेकिन इस विशेष परिदृश्य में नहीं)।

PlanContainer के साथ कुछ और मुद्दे हैं जो स्पष्ट नहीं हैं कि क्या वे वास्तविक मुद्दे हैं, या केवल ओपी में कोड चूक का परिणाम हैं।

नीचे एनोटेशन देखें:

class PlanContainer extends React.Component {

  componentDidMount() {
    this.props.fetchBudgets();
  }

  constructor(props) {
    ... // removed for brevity, use the same code as you have right now
  }



  render() {
    return (
      <div>
      <RemoteCellEdit
        data={ this.props.budgets}
        columns = { this.columns }
        keyField = 'id'
        errorMessage={ /* should come from props.data or similar - it's not in state */ }
      />

      <tbody>
      {this.props.budgets} /* not sure what this is for - I assumed RemoteCellEdit is the one rendering the data */
      </tbody>

    </div>
    );
  }
}

इन्हें ठीक करना आपको सही दिशा में स्थापित करना चाहिए। आपको कामयाबी मिले!

0
Mrchief 2 जुलाई 2018, 17:47