मैं प्रतिक्रिया और Redux के लिए नया हूँ और मैं परिवर्तन पर एक ड्रॉप-डाउन फ़ील्ड मान बदलने की कोशिश कर रहा हूँ, लेकिन जब मैं मूल्य का चयन कर रहा हूँ जो मुझे मिल रहा है। ऐसा लगता है कि मैं Redux की बुनियादी बातों का पालन कर रहा हूं https://redux.js.org/basics, भले ही मैंने एक बेहतर समाधान खोजने के लिए और एक्शन फ़ंक्शन को फिर से लिखने के लिए दिनों के लिए शोध किया, लेकिन दस्तावेज़ीकरण को देखना काफी समान कोड है।

लेखन त्रुटि: अपरिभाषित की संपत्ति 'सेटस्टैटस' नहीं पढ़ सकता

मेरा index.js

// @flow
import React from 'react';
import Select from 'react-select'
import {connect} from 'react-redux'

import {
  setStatus,
} from '../../actions'

type Props = {
  status: { value: ?string, label: ?string },
  setStatus: Function,
}

type State = {}

// Select Invoice Type
const statusOptions = [
  {value: 'paid', label: 'Paid'},
  {value: 'due', label: 'Due'},
  {value: 'overdue', label: 'Overdue'},
  {value: 'onhold', label: 'On Hold'}
];

class Dashboard extends React.Component<Props, State> {
  state: State;

  constructor(props: Props) {
    super(props);
    this.state = {}
  }

  handleChangeStatus(value: { value: ?string, label: ?string }) {
    console.log(value)
    if (value)
      this.props.setStatus(value);
    else
      this.props.setStatus({value: 'paid', label: 'Paid'});
  };

  render() {
    return (
      <div>
        {/* Select Invoice Status */}
        <Select
          name="status"
          value={this.props.status}
          options={statusOptions}
          searchable={false}
          onChange={this.handleChangeStatus}
        />
      </div>
    )
  }
}

function mapStateToProps(state, ownProps) {
  return {
    status: state.status,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    setStatus: (statusObj) => dispatch(setStatus(statusObj)),
  }
}

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

मेरा `/action/index.js/

// @flow

import {
  SET_INVOICE_STATUS,
} from '../constants';

export type Action = {
  status?: Object,
}

export function setStatus(status: Object): Action {
  return {
    type: SET_INVOICE_STATUS,
    status
  }
}

मेरा /constant/index.js

// @flow

// Dashboard Implementation
export const SET_INVOICE_STATUS: string = "SET_INVOICE_STATUS";

और अंत में मेरा reducer/index.js

// @flow

import {SET_INVOICE_STATUS} from "../constants";
import type {Action} from "../actions";

type State = Object;

export default function statusReducer(state: State = {value: 'paid', label: 'Paid'}, action: Action) {
  if (action.type === SET_INVOICE_STATUS) {
    return action.status;
  }

  return state;
}

अपडेट 2 सितंबर, 2018

इसलिए बेबेल और प्लगइन्स सीखने के एक सप्ताह के बाद जो मैं अपने प्रोजेक्ट के लिए उपयोग कर सकता हूं, मुझे बैबेल में एक प्लगइन स्थापित करने का एक समाधान मिल गया है जो handleChange = (event) => {} जैसे एक त्रुटि फ़ंक्शन बनाने में मदद करता है जिसे babel-plugin-transform-class-properties कहा जाता है। यहां स्थित https://babeljs.io/docs/en/babel -प्लगइन-ट्रांसफॉर्म-क्लास-प्रॉपर्टीज/. बाध्यकारी मदद के लिए भोजेंद्र रौनियार को धन्यवाद।

1
GYTO 29 अगस्त 2018, 07:58
आपको दो चीजें करने की आवश्यकता है 1. this.props.setStatus आप इसका उपयोग कर रहे हैं इसका मतलब है कि आपके माता-पिता को रेड्यूसर को अपडेट करने के लिए जिम्मेदार होना चाहिए और सेटस्टैटस को माता-पिता 2 से कॉल किया जाना चाहिए। आप अपनी तिथि को अपडेट करने के लिए सीधे this.props.dispatch(actiion.actionname()) पर कॉल कर सकते हैं रेडक्स मुझे नहीं लगता कि आपको अधिकांश परिदृश्यों में माता-पिता की आवश्यकता है।
 – 
Just code
29 अगस्त 2018, 08:09

2 जवाब

कब आप करेंगे:

this.props.setStatus(value);

this अपरिभाषित है। क्योंकि, आपकी विधि बाध्य नहीं है। तो, आपको this को बाइंड करना होगा। अलग-अलग तरीके हैं, आप कंस्ट्रक्टर के अंदर this को बांधने का प्रयास कर सकते हैं:

this.handleChangeStatus = this.handleChangeStatus.bind(this)
4
Bhojendra Rauniyar 29 अगस्त 2018, 08:12
1
या फ़ंक्शन को स्वयं तीर फ़ंक्शन के रूप में उपयोग किया जा सकता है: हैंडल चेंजस्टैटस = (मान: {मान:? स्ट्रिंग, लेबल:? स्ट्रिंग}) => {
 – 
Azamat Zorkanov
29 अगस्त 2018, 08:15
आप गनीज़ हैं। मैं इस बारे में कई बार सोच रहा था लेकिन कभी अमल करने की कोशिश नहीं की। क्या आप बता सकते हैं कि इस पद्धति का सबसे अधिक उपयोग क्यों किया जाता है?
 – 
GYTO
29 अगस्त 2018, 15:59
हां, मैंने मूल रूप से इस विधि की कोशिश की, लेकिन समस्या यह है कि प्रतिक्रिया एक त्रुटि दे रही थी Unexpected token वें हैंडल चेंज स्टेटस = में। मुझे यकीन था कि मैं इसे सही कर रहा हूं, लेकिन मुझे यह पसंद नहीं आया।
 – 
GYTO
29 अगस्त 2018, 16:03

जैसे @भोजेंद्र ने कहा, आप इसे दो तरीकों में से एक कर सकते हैं (दोनों को handleChangeStatus फ़ंक्शन को बांधने की आवश्यकता है। सबसे पहले एक तीर फ़ंक्शन का उपयोग करना है:

 handleChangeStatus = (value: { value: ?string, label: ?string }) => { //binds with arrow func
    console.log(value)
    if (value)
      this.props.setStatus(value);
    else
      this.props.setStatus({value: 'paid', label: 'Paid'});
  };

या दो, कंस्ट्रक्टर पर बाँधें:

    constructor(props: Props) {
        super(props);
        this.state = {}
        this.handleChangeStatus = this.handleChangeStatus.bind(this) // binding this to your function
      }

आपको दोनों करने की जरूरत नहीं है, केवल एक ही। एरो फंक्शन सबसे आसान है लेकिन दोनों काम करते हैं।

0
Kevin Danikowski 29 अगस्त 2018, 16:50