ReactJS: সর্বাধিক আপডেট গভীরতা ত্রুটি অতিক্রম করেছে

Question

আমি রিঅ্যাক্টজেএস-এ কোনও উপাদানটির অবস্থা টগল করার চেষ্টা করছি তবে উল্লেখ করে আমি একটি ত্রুটি পেয়েছি:

সর্বাধিক আপডেট গভীরতা অতিক্রম করেছে। এটি যখন ঘটতে পারে যখন কোনও উপাদান বারবার সেটস্টেটকে উপাদান উপাদান উইলআপডেট বা উপাদান ডিডআপ্পেটের অভ্যন্তরে কল করে। প্রতিক্রিয়া অসীম লুপগুলি প্রতিরোধ করতে নেস্টেড আপডেটের সংখ্যা সীমিত করে।

আমি আমার কোডটিতে অসীম লুপটি দেখতে পাচ্ছি না, কেউ সাহায্য করতে পারে?

ReactJS উপাদান কোড:

import React, { Component } from 'react';
import styled from 'styled-components';

class Item extends React.Component {
    constructor(props) {
        super(props);     
        this.toggle= this.toggle.bind(this);
        this.state = {
            details: false
        } 
    }  
    toggle(){
        const currentState = this.state.details;
        this.setState({ details: !currentState }); 
    }

    render() {
        return (
            <tr className="Item"> 
                <td>{this.props.config.server}</td>      
                <td>{this.props.config.verbose}</td> 
                <td>{this.props.config.type}</td>
                <td className={this.state.details ? "visible" : "hidden"}>PLACEHOLDER MORE INFO</td>
                {<td><span onClick={this.toggle()}>Details</span></td>}
            </tr>
    )}
}

export default Item;

Comments

পরিবর্তন this.toggle()করুন this.toggleবা{()=> this.toggle()}

— শিক্ষার্থী

আপনার সমস্যার সাথে সম্পর্কিত না হলেও আরেকটি উন্নতি: এমনটি toggle(){...}পরিণত করুন toggle = () => {...}যাতে আপনার bindএটির প্রয়োজন হয় না!

— বেরি এম।

ধন্যবাদ @ এলার্নার আপনি আমাকেও সাহায্য করেছিলেন। আপনি কি দয়া করে আপনার সমাধানের পিছনে কারণটি ব্যাখ্যা করতে পারেন? এই দুজনের মধ্যে পার্থক্য কী?

— শামীম

@ শামীম এটি একটি বিদ্যমান ফাংশনটি কল করা এবং কোনও ফাংশনের রেফারেন্সটি পাস করার মধ্যে পার্থক্য। এটি ব্যবহারকারী এবং পৃষ্ঠাটি লোড হওয়ার সাথে সাথে ট্রিগারযুক্ত কোড নয়, ব্যবহারকারী যখন কিছু করে তখন প্রদর্শিত এবং ট্রিগার করার জন্য কোডটি লিখছি তা বোঝা সহায়ক। reactjs.org/docs/faq-functions.html

— প্রদর্শন নাম

Answer 1

কারণ আপনি রেন্ডার পদ্ধতির ভিতরে টগল কল করছেন যা পুনরায় রেন্ডার করবে এবং টগল আবার কল করবে এবং পুনরায় রেন্ডারিং করবে ইত্যাদি on

আপনার কোডে এই লাইন

{<td><span onClick={this.toggle()}>Details</span></td>}

আপনাকে এটি কল না করার বিষয়ে onClickউল্লেখ করতে this.toggleহবে

সমস্যাটি ঠিক করার জন্য এটি করুন

{<td><span onClick={this.toggle}>Details</span></td>}

Comments

আমি একইরকম পরিস্থিতির মুখোমুখি, তবে টগল করার জন্য আমার একটি পরামিতি পাস করা দরকার, কীভাবে এটি সম্পাদন করা যায়?

— নিবেদিতথা কর্মেগাম

@NivedithaKarmegam দো onClick={(param) => this.toggle(param)}। এটি তাত্ক্ষণিকভাবে আগুন নেবে না (এবং পুনরায় সরবরাহ করা)। এটি একটি কলব্যাক সংজ্ঞা (তীর ফাংশন)।

— ফ্যাবিয়ান পিকন

@ ফ্যাবিয়ানপিকন আপনার পদ্ধতিটি চেষ্টা করেছেন তবে যখন আমি কনসোল.লগ করে দেখায় যে "পরম" ইভেন্ট হিসাবে পাস হয়েছে, আসলে করা উচিতonClick={() => this.toggle(param)}

— iWillGetBetter

@ iWillGetBetter হ্যাঁ অনক্লিকের প্রথম প্যারাম হ'ল ক্লিক ইভেন্ট। আপনার যদি অতিরিক্ত পরম প্রয়োজন হয় তবে আপনি এটি পাসও করতে পারেন onClick={(event) => this.toggle(event, myParam)}।

— ফ্যাবিয়ান পিকন

আমার এই ফাংশনটি closeEditModal = () => this.setState({openEditModal: false});কীভাবে এটি রেন্ডার করতে হবে?

— নাক্স

Answer 2

ফাংশনটি কল করার সময় আপনার ইভেন্ট অবজেক্টটি পাস করা উচিত:

{<td><span onClick={(e) => this.toggle(e)}>Details</span></td>}

আপনার যদি অনক্লিক ইভেন্টটি পরিচালনা করার দরকার না হয় তবে আপনি টাইপ করতে পারেন:

{<td><span onClick={(e) => this.toggle()}>Details</span></td>}

এখন আপনি ফাংশনটির মধ্যে আপনার পরামিতিগুলি যুক্ত করতে পারেন।

Comments

কিছু নির্দিষ্ট না করা থাকলে ইভেন্ট অবজেক্টটি স্বয়ংক্রিয়ভাবে প্রেরণ করা হয়। যে ফাংশনটি বলা হয় তার মধ্যে কেবল একটি ইনপুট প্যারামিটার অন্তর্ভুক্ত করুন।

— জেফ পিংকস্টন

{<td><span onClick={() => this.toggle(whateverParameter)}>Details</span></td>}আমার জন্য কৌশলটি করে

— iWillGetBetter

Answer 3

প্রথমে প্রতিক্রিয়াটি ভুলে যান:
এটি প্রতিক্রিয়া সম্পর্কিত নয় এবং আসুন জাভা স্ক্রিপ্টের প্রাথমিক ধারণাটি বুঝতে পারি understand উদাহরণস্বরূপ আপনি জাভা স্ক্রিপ্টে নিম্নলিখিত ফাংশন লিখেছেন (নামটি এ)।

function a() {

};

প্রশ্ন ১) আমরা যে ফাংশনটি সংজ্ঞায়িত করেছি তাকে কীভাবে কল করব?
উত্তর: ক ();

প্রশ্ন ২) ফাংশনটির রেফারেন্স কীভাবে পাস করবেন যাতে আমরা এটি পরেরটি বলতে পারি?
উত্তর: লেট মজা = ক;

এখন আপনার প্রশ্নে, আপনি ফাংশন নামের সাথে প্যারান্থেসিস ব্যবহার করেছেন, এর অর্থ নীচের বিবৃতিটি রেন্ডার করার সময় ফাংশনটি ডাকা হবে।

<td><span onClick={this.toggle()}>Details</span></td>

তাহলে কীভাবে এটি সংশোধন করবেন?
সরল !! শুধু বন্ধনীর অপসারণ। এইভাবে আপনি সেই ফাংশনটির রেফারেন্স অনক্লিক ইভেন্টে দিয়েছেন। এটি তখনই আপনার ফাংশনটিকে কল করবে যখন আপনার উপাদানটি ক্লিক করা হবে।

 <td><span onClick={this.toggle}>Details</span></td>

প্রতিক্রিয়া জানাতে একটি পরামর্শ সম্পর্কিত: উত্তরে
কারও পরামর্শ অনুসারে ইনলাইন ফাংশনটি ব্যবহার করা এড়িয়ে চলুন, এটি পারফরম্যান্স সমস্যার কারণ হতে পারে। নিম্নলিখিত কোডটি এড়িয়ে চলুন, এটি যখনই ফাংশন ডাকা হবে বার বার একই ফাংশনের উদাহরণ তৈরি করবে (লামদা বিবৃতিটি প্রতিবার নতুন উদাহরণ তৈরি করে)।
নোট: এবং ইভেন্ট (ঙ) ফাংশনে স্পষ্টভাবে পাস করার দরকার নেই। আপনি এটি পাস না করে ফাংশনে এটিতে অ্যাক্সেস করতে পারেন।

{<td><span onClick={(e) => this.toggle(e)}>Details</span></td>}

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

Answer 4

আমি জানি এর প্রচুর উত্তর রয়েছে তবে যেহেতু তাদের বেশিরভাগই বয়স্ক (ভাল, বয়স্ক), তাই কোনওটিই খুব দ্রুততার জন্য আমি বাড়ার পদ্ধতির কথা উল্লেখ করে না। সংক্ষেপে:

ক্রিয়ামূলক উপাদান এবং হুক ব্যবহার করুন ।

দীর্ঘতর:

বিশেষত রেন্ডারিংয়ের জন্য ক্লাসের পরিবর্তে যতগুলি কার্যকরী উপাদান ব্যবহার করার চেষ্টা করুন এবং এগুলি যথাসম্ভব খাঁটি রাখার চেষ্টা করুন (হ্যাঁ, আমি জানি ডিফল্ট হিসাবে ডেটা নোংরা)।

ক্রিয়ামূলক উপাদানগুলির দুটি ভোঁতাভাবে সুস্পষ্ট সুবিধা (আরও রয়েছে):

• বিশুদ্ধতা বা কাছের বিশুদ্ধতা ডিবাগিংকে এত সহজ করে তোলে
• কার্যকরী উপাদানগুলি কনস্ট্রাক্টর বয়লার কোডের প্রয়োজনীয়তা সরিয়ে দেয়

২ য় পয়েন্টের জন্য দ্রুত প্রমাণ - এটি কি একেবারেই জঘন্য নয়?

constructor(props) {
        super(props);     
        this.toggle= this.toggle.bind(this);
        this.state = {
            details: false
        } 
    }  

আপনি যদি আরও কার্যকরী উপাদান ব্যবহার করে থাকেন তবে রেন্ডারিংয়ের জন্য দুর্দান্ত যুগল - হুকের দ্বিতীয় অংশ দরকার। তারা কেন আরও উন্নততর জীবনচক্র পদ্ধতি, আরও কী কী তারা করতে পারে এবং আরও অনেক কিছু আমাকে কভার করতে অনেক জায়গা নিতে পারে তাই আমি আপনাকে সেই ব্যক্তিটির নিজের কথা শোনার জন্য পরামর্শ দিচ্ছি: ড্যান হুকস প্রচার করছে

এই ক্ষেত্রে আপনার কেবল দুটি হুক প্রয়োজন:

একটি কলব্যাক হুক সুবিধামত নামকরণ useCallback। আপনি পুনরায় রেন্ডার করার সময় আপনি এই ক্রিয়াকলাপটিকে বার বার বাধা দিচ্ছেন।

একটি রাষ্ট্র হুক বলা হয় useState, পুরো উপাদানটি সক্রিয় থাকা সত্ত্বেও এবং সম্পূর্ণরূপে সম্পাদন করার জন্য রাষ্ট্রকে রাখার জন্য (হ্যাঁ, হুকের যাদুতে এটি সম্ভব হয়েছে)। এই হুকের মধ্যে আপনি টগলের মান সঞ্চয় করবেন।

আপনি যদি এই অংশটি পড়ে থাকেন তবে আপনি সম্ভবত সমস্ত কিছু দেখতে চান যা আমি কার্যক্রমে আলোচনা করেছি এবং মূল সমস্যাটিতে প্রয়োগ করেছি। আপনি এখানে যান: ডেমো

আপনারা যারা কেবলমাত্র উপাদানটি দেখতে চান এবং ডাব্লুটিএফএফ এটি হ'ল আপনি এখানে:

const Item = () => {

    // HOOKZ
  const [isVisible, setIsVisible] = React.useState('hidden');

  const toggle = React.useCallback(() => {
    setIsVisible(isVisible === 'visible' ? 'hidden': 'visible');
  }, [isVisible, setIsVisible]);

    // RENDER
  return (
  <React.Fragment>
    <div style={{visibility: isVisible}}>
        PLACEHOLDER MORE INFO
    </div>
    <button onClick={toggle}>Details</button>
  </React.Fragment>
  )
};

পিএস: অনেক লোক অনুরূপ সমস্যা নিয়ে অবতরণ করার ক্ষেত্রে আমি এটি লিখেছিলাম। আশা করি তারা এটিকে আরও কিছুটা গুগল করার জন্য তারা যা দেখতে পাবে পছন্দ করবে। এটি অন্য উত্তরগুলি ভুল বলে আমি বলছি না, এটি আমি বলছি যে তারা লেখার সময় থেকেই এর সাথে মোকাবিলা করার আরও একটি উপায় রয়েছে (আইএমএইচও, আরও ভাল)।

Answer 5

যদি আপনার কাজ করতে আর্গুমেন্টগুলি পাস করার প্রয়োজন না হয় তবে কেবল নীচের মত ফাংশন থেকে () সরিয়ে দিন:

<td><span onClick={this.toggle}>Details</span></td>

তবে আপনি যদি যুক্তিগুলি পাস করতে চান তবে আপনার নীচের মতো করা উচিত:

<td><span onClick={(e) => this.toggle(e,arg1,arg2)}>Details</span></td>

Answer 6

ReactJS: সর্বাধিক আপডেট গভীরতা ত্রুটি অতিক্রম করেছে

inputDigit(digit){
  this.setState({
    displayValue: String(digit)
  })

<button type="button"onClick={this.inputDigit(0)}>

কেন?

<button type="button"onClick={() => this.inputDigit(1)}>1</button>

ডিগ্রিটি ফাংশনটি রাষ্ট্রকে সেট করে, যার ফলে একটি পুনরায় রেন্ডার হয়, যা অনডিজিটকে আগুনের কারণ করে কারণ আপনি যেই মানটিকে অনক্লিক হিসাবে নির্ধারণ করছেন যার ফলে রাজ্যটি সেট হয়ে যায় যা একটি রেন্ডার দেয়, কারণ অনডিজিটকে আগুন দেয় কারণ এটিই আপনার মূল্য ' আবার… ইত্যাদি

Answer 7

১. যদি আমরা কলটিতে যুক্তিটি পাস করতে চাই তবে নীচের মতো পদ্ধতিটি আমাদের কল করতে হবে আমরা যেমন তীর ফাংশনগুলি ব্যবহার করছি তেমন পদ্ধতিটিকে আবদ্ধ করার দরকার নেই cunstructor।

onClick={() => this.save(id)} 

যখন আমরা পদ্ধতিটিকে এইরকম কনস্ট্রাক্টরে আবদ্ধ করি

this.save= this.save.bind(this);

তারপরে নীচের মতো কোনও যুক্তি ছাড়াই আমাদের পদ্ধতিটি কল করতে হবে

onClick={this.save}

নীচে প্রদর্শিত ফাংশনটি কল করার সময় আমরা তর্কটি পাস করার চেষ্টা করি তারপরে ত্রুটিটি সর্বোচ্চ গভীরতা অতিক্রম করার মতো আসে।

 onClick={this.save(id)}

Answer 8

অন ​​ক্লিকে আপনার ফাংশন কল করা উচিত, এটি আপনার ফাংশনটিকে টগল বলে।

onClick={() => this.toggle()}

Answer 9

এই ক্ষেত্রে, এই কোড

{<td><span onClick={this.toggle()}>Details</span></td>}

টগল ফাংশনটি তাত্ক্ষণিকভাবে কল করতে এবং পুনরায় রেন্ডার করে এবং এভাবে অসীম কল করে causes

সুতরাং কেবলমাত্র সেই টগল পদ্ধতির রেফারেন্সটি পাস করা সমস্যার সমাধান করবে।

সুতরাং,

{<td><span onClick={this.toggle}>Details</span></td>}

সমাধান কোড হবে।

আপনি যদি () ব্যবহার করতে চান তবে আপনার এটির মতো একটি তীর ফাংশনটি ব্যবহার করা উচিত

{<td><span onClick={()=> this.toggle()}>Details</span></td>}

আপনি যদি প্যারামিটারগুলি পাস করতে চান তবে আপনার শেষ বিকল্পটি বেছে নেওয়া উচিত এবং আপনি এই জাতীয় পরামিতিগুলি পাস করতে পারেন

{<td><span onClick={(arg)=>this.toggle(arg)}>Details</span></td>}

শেষের ক্ষেত্রে এটি তাত্ক্ষণিকভাবে কল করবে না এবং ফাংশনটির পুনরায় রেন্ডার সৃষ্টি করবে না, তাই অসীম কলগুলি এড়ানো iding