Dva: रिएक्ट हुक और dva के साथ समस्या

को निर्मित 27 जून 2019 · 30टिप्पणियाँ · स्रोत: dvajs/dva

import { connect } from 'dva';
import React, { useEffect } from 'react';

const Page = props => {
  const { dispatch, text } = props;
  useEffect(() => {
    dispatch({ type: 'xxx/fetchText' });
  }, []);

 return <div>{text}</div>
}

export default connect(({ xxx }) => ({ text: xxx.text }))(Page);

यदि इसे इस तरह लिखा जाता है, तो इसे चेक करते समय नियम react-hooks/exhaustive-deps React Hook useEffect has a missing dependency: dispatch. द्वारा संकेत दिया जाएगा
लेकिन अगर डिस्पैच को useEffect की डिपेंडेंसी लिस्ट में जोड़ा जाता है, तो इसमें अनुरोध लगातार निष्पादित होंगे। dva के साथ संयोजन में रिएक्ट हुक का उपयोग करते समय मुझे इसे कैसे लिखना चाहिए?

wontfix

स्रोत

iclae

❤2

सबसे उपयोगी टिप्पणी

https://www.npmjs.com/package/dva-react-hook

langer-man 8 अग॰ 2019

👍6

सभी 30 टिप्पणियाँ

उपयोग डिस्पैच, हुक का उपयोग करने के बाद, आपको कनेक्ट करने की आवश्यकता नहीं है, लेकिन आलसी होने के लिए, मैंने स्टोर से सभी प्रभाव और रेड्यूसर निकाले, नेमस्पेस के माध्यम से खोजा और सभी कार्यों को वापस कर दिया, देखें:

function useActions(namespace) {
  const dispatch = useDispatch();

  const actions = useMemo(() => {
    const { _models } = getStore();
    const targetModel = _models.find(model => model.namespace === namespace);
    return targetModel ? Object.keys({ ...targetModel.effects, ...targetModel.reducers }).reduce((prev, curre) => {
      const actionName = curre.replace(new RegExp(`^${namespace}/`), '');
      prev[actionName] = payload => dispatch({ type: curre, payload });
      return prev;
    }, {}) : {};
  }, [namespace, dispatch]);

  return actions;
}

Ryuurock 1 जुल॰ 2019

👍1

उपयोग डिस्पैच, हुक का उपयोग करने के बाद, आपको कनेक्ट करने की आवश्यकता नहीं है, लेकिन आलसी होने के लिए, मैंने स्टोर से सभी प्रभाव और रेड्यूसर निकाले, नेमस्पेस के माध्यम से खोजा और सभी कार्यों को वापस कर दिया, देखें:
function useActions(namespace) {
  const dispatch = useDispatch();

  const actions = useMemo(() => {
    const { _models } = getStore();
    const targetModel = _models.find(model => model.namespace === namespace);
    return targetModel ? Object.keys({ ...targetModel.effects, ...targetModel.reducers }).reduce((prev, curre) => {
      const actionName = curre.replace(new RegExp(`^${namespace}/`), '');
      prev[actionName] = payload => dispatch({ type: curre, payload });
      return prev;
    }, {}) : {};
  }, [namespace, dispatch]);

  return actions;
}

ऐसा लगता है कि अधिकारियों ने useDispatch() के उपयोग को हटा दिया है।
अभी
इस तरह इस्तेमाल करें

UlyC 2 जुल॰ 2019

👎1

@UlyC को कहाँ से हटाया गया है, क्या आप कोई लिंक दे सकते हैं?

Ryuurock 2 जुल॰ 2019

@UlyC को कहाँ से हटाया गया है, क्या आप कोई लिंक दे सकते हैं?

मैं गलत था।
https://reactjs.org/docs/hooks-reference.html पर आधिकारिक रिएक्ट हुक एपीआई में कोई उपयोग डिस्पैच () उपयोग नहीं है,
प्रतिक्रिया-रेडक्स से आयात करने के लिए यह प्रतिक्रिया-रेडक्स https://react-redux.js.org/next/api/hooks#useddispatch का उपयोग है
import { useDispatch } from 'react-redux'

UlyC 2 जुल॰ 2019

😕3

@UlyC को कहाँ से हटाया गया है, क्या आप कोई लिंक दे सकते हैं?
मैं गलत था।
https://reactjs.org/docs/hooks-reference.html पर आधिकारिक रिएक्ट हुक एपीआई में कोई उपयोग डिस्पैच () उपयोग नहीं है,
प्रतिक्रिया-रेडक्स से आयात करने के लिए यह प्रतिक्रिया-रेडक्स https://react-redux.js.org/next/api/hooks#useddispatch का उपयोग है
import { useDispatch } from 'react-redux'

= - अच्छा

Ryuurock 2 जुल॰ 2019

~ const dispatch = useDispatch(); हुक क्या यह वादा नहीं करते? ~
dva . में वादा करने के लिए प्रभाव जोड़ा जाता है

yoyo837 12 जुल॰ 2019

क्या dva/umi ने हुक को एकीकृत करने पर विचार किया है? यदि आप इसका उपयोग करना चाहते हैं, तो क्या आपको इस तरह import { useDispatch } from 'react-redux' का उपयोग करना होगा। क्या छेद होंगे।

sqfbeijing 12 जुल॰ 2019

मैंने इसका इस्तेमाल किया, कोई बात नहीं

yoyo837 12 जुल॰ 2019

@योयो837
````
'dva' से आयात {useDispatch};

कंसोल.लॉग ('6:23:08 अपराह्न', उपयोग डिस्पैच)
````
मैं इस तरह अपरिभाषित प्रिंट करता हूं। क्या मुझे प्रतिक्रिया-रेडक्स को अपग्रेड करना चाहिए?किस संस्करण में?

sqfbeijing 12 जुल॰ 2019

dva नवीनतम बीटा अपग्रेड करें

yoyo837 12 जुल॰ 2019

आप बेहतर तरीके से रिलीज़ देखें

yoyo837 12 जुल॰ 2019

मैं अपग्रेड के बाद दस्तावेज़ को अपडेट करने की आशा करता हूं। मुझे पता नहीं चला है कि useDispatch फ़ंक्शन क्या कर रहा है।

furylee 23 जुल॰ 2019

dva सीधे react-redux useDispatch से लिया गया है, आप केवल react-redux दस्तावेज़ को देख सकते हैं

https://react-redux.js.org/api/hooks#useddispatch

yoyo837 23 जुल॰ 2019

https://www.npmjs.com/package/dva-react-hook

langer-man 8 अग॰ 2019

👍6

1. डीवीए को नवीनतम संस्करण में अपग्रेड करें (मेरा संस्करण 2.6.0-बीटा.12 है)
2.

संदर्भ पता: https://react-redux.js.org/api/hooks
मुझे मददगार होने की उम्मीद है

lanceMe 30 अग॰ 2019

👍4 👀2

Antd Pro V4 को 2.6beta 12 में अपग्रेड किया गया है और इसे सामान्य रूप से इस्तेमाल किया जा सकता है, लेकिन कनेक्ट रिपोर्ट का प्रकार गलत है। TableList का त्रुटि संदेश निम्नलिखित है, इसे कैसे ठीक करें?

作为表达式调用时，无法解析类修饰器的签名。
  不能将类型“ConnectedComponentClass<typeof TableList, Pick<TableListProps, "form" | "wrappedComponentRef">>”分配给类型“typeof TableList”。
    Type 'Component<Pick<TableListProps, "form" | "wrappedComponentRef">, any, any>' is missing the following properties from type 'TableList': columns, handleStandardTableChange, handleFormReset, toggleForm, and 10 more.

wangzhipeng404 2 सित॰ 2019

@ wangzipeng404 हुक का उपयोग करें और कनेक्ट घटकों की कोई आवश्यकता नहीं है

yoyo837 2 सित॰ 2019

👍3

लेकिन प्रो फ्रेमवर्क का लेआउट और ब्लॉक कनेक्ट का उपयोग करता है, क्या मुझे उन्हें स्वयं बदलना है, क्या इस प्रकार की त्रुटियों को जल्दी से ठीक करने का कोई तरीका है

wangzhipeng404 2 सित॰ 2019

मैंने एक साधारण परीक्षण केस लिखा है, निम्नलिखित कोड सामान्य तरीके से लिखा गया है और सामान्य रूप से उपयोग किया जा सकता है

import React, { Component } from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';

@connect(({ products }) => ({
  products,
}))
export default class Products extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'products/fetch',
    });
  }
  handleDelete = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  };
  render() {
    const { products } = this.props;
    return (
      <div>
        <h2>List of Products</h2>
        <ProductList onDelete={this.handleDelete} products={products} />
      </div>
    );
  }
}

बाद में, मैंने https://react-redux.js.org/next/api/hooks को संदर्भित किया और इसे हुक में फिर से लिखना चाहता था

import React, { useEffect } from 'react';
// import { connect } from 'dva';
import ProductList from '../components/ProductList';
import { useSelector, useDispatch } from 'react-redux';

// https://react-redux.js.org/next/api/hooks

export default function Products() {
  console.info(`useDispatch: `,useDispatch)
  const dispatch = useDispatch();
  const products = useSelector(state => state.products);
  useEffect(() => {
    dispatch({
      type: 'products/fetch',
    });
  });
  const handleDelete = id => {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  };
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
}

लेकिन इस बार यह एक त्रुटि देता है

हुक का समर्थन करने की प्रबल आशा है

liudonghua123 1 अक्तू॰ 2019

@ liudonghua123 इस बार dva स्रोत कोड पर एक नज़र डालने के रूप में जल्दी से पूछता है।नीचे दिया गया आपका कोड डीवीए का उपयोग नहीं करता है और प्रतिक्रिया-रेडक्स द्वारा आवश्यकतानुसार काम नहीं करता है, आपके लिए ऐसा करने के लिए dva का उपयोग करें, यदि आप इसका उपयोग कर सकते हैं तो यह अजीब है।

yoyo837 1 अक्तू॰ 2019

@ liudonghua123 उपरोक्त तथाकथित प्रयोग करने योग्य उदाहरण डीवीए प्रारंभिक लोड किए बिना उपयोग करना असंभव है, और डीवीए सीधे कनेक्ट, उपयोग चयनकर्ता और प्रतिक्रिया-रेडक्स के अन्य तरीकों का निर्यात करता है।

yoyo837 1 अक्तू॰ 2019

👍1

@ yoyo837 जिस कोड का मैं सामान्य रूप से ऊपर उपयोग कर सकता हूं वह कोड का हिस्सा है, डीवीए प्रारंभिक भाग कहीं और है, मैंने यह सब यहां नहीं लिखा है, कोड https://dvajs.com/guide/getting- के संदर्भ में लिखा गया है- https://github.com/liudonghua123/dva-quickstart/blob/hooks/src/routes/Products.js , हुक शाखा समस्याग्रस्त है, मास्टर शाखा का सामान्य रूप से उपयोग किया जा सकता है

liudonghua123 2 अक्तू॰ 2019

जैसा कि ऊपर बताया गया है, मैंने dva से 2.6.0-beta.14 तक अपडेट की कोशिश की, कोड को बिना किसी संशोधन के सामान्य रूप से इस्तेमाल किया जा सकता है, लेकिन एकीकरण के लिए, useSelector , useDispatch से बदल दिया गया है dva निर्यात थोड़ा बेहतर है सभी संशोधन हैं
https://github.com/liudonghua123/dva-quickstart/commit/f9bd1dd1332e62739d15050c4d50bc069a7fb58f

liudonghua123 2 अक्तू॰ 2019

👍2 😄1

लेकिन प्रो फ्रेमवर्क का लेआउट और ब्लॉक कनेक्ट का उपयोग करता है, क्या मुझे उन्हें स्वयं बदलना है, क्या इस प्रकार की त्रुटियों को जल्दी से ठीक करने का कोई तरीका है

नमस्ते, क्या आपने इस समस्या का समाधान किया है?antd-pro-ts में प्रयुक्त dva_beta संस्करण एक त्रुटि की रिपोर्ट करता प्रतीत होता है

could not find react-redux context value; please ensure the component is wrapped in a <Provider>

ऐसा लगता है कि अंदर बहुत सारा सामान भरा हुआ है

LbhFront-end 7 नव॰ 2019

@ liudonghua123 उपरोक्त तथाकथित प्रयोग करने योग्य उदाहरण डीवीए प्रारंभिक लोड किए बिना उपयोग करना असंभव है, और डीवीए सीधे कनेक्ट, उपयोग चयनकर्ता और प्रतिक्रिया-रेडक्स के अन्य तरीकों का निर्यात करता है।

यह समझ में आता है, ऐसा लगता है कि यह वास्तव में मिश्रण करने में सक्षम नहीं है, यह वही सिद्धांत नहीं है

LbhFront-end 7 नव॰ 2019

Antd Pro V4 को 2.6beta 12 में अपग्रेड किया गया है और इसे सामान्य रूप से इस्तेमाल किया जा सकता है, लेकिन कनेक्ट रिपोर्ट का प्रकार गलत है। TableList का त्रुटि संदेश निम्नलिखित है, इसे कैसे ठीक करें?
作为表达式调用时，无法解析类修饰器的签名。
  不能将类型“ConnectedComponentClass<typeof TableList, Pick<TableListProps, "form" | "wrappedComponentRef">>”分配给类型“typeof TableList”。
    Type 'Component<Pick<TableListProps, "form" | "wrappedComponentRef">, any, any>' is missing the following properties from type 'TableList': columns, handleStandardTableChange, handleFormReset, toggleForm, and 10 more.
मुझे भी यह समस्या है, क्या आपने इसका समाधान किया है?

LiuJinYang9527 4 दिस॰ 2019

हुक के साथ, आपको फिर से कनेक्ट का उपयोग करने की आवश्यकता नहीं है।

yoyo837 4 दिस॰ 2019

हुक के साथ, आपको फिर से कनेक्ट का उपयोग करने की आवश्यकता नहीं है।

ठीक है, लेकिन परियोजना पहले वर्ग के घटकों के साथ लिखी गई थी, और हुक के साथ रिफैक्टरिंग का कार्यभार थोड़ा भारी है, और इस प्रकार की चेतावनी बहुत कष्टप्रद लगती है

LiuJinYang9527 4 दिस॰ 2019

इस समस्या को स्वचालित रूप से पुराने के रूप में चिह्नित कर दिया गया है क्योंकि इसमें हाल की गतिविधि नहीं है। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।

stale[bot] 2 फ़र॰ 2020

https://github.com/dvajs/dva/issues/2140#issuecomment -507620628 सुनकर खुशी हुई

youngjuning 8 जून 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Dva: रिएक्ट हुक और dva के साथ समस्या

सबसे उपयोगी टिप्पणी

सभी 30 टिप्पणियाँ

संबंधित मुद्दों