javascript - প্রতিক্রিয়া-অ্যারে.ম্যাপ() দ্বারা রেন্ডার করা এই স্টেট অনক্লিক পরিবর্তন করুন)




reactjs (3)

আপনি আসলে আপনার প্রশ্নে প্রায় পেয়ে গেছেন। আপনার রাজ্য অপরিজ্ঞাত হওয়ার কারণটি event স্বল্পস্থায়ী প্রকৃতির কারণেই আমি বাজি ধরছি। setState একটি setState অ্যাকশন এবং সর্বদা তাত্ক্ষণিকভাবে ঘটে না। ইভেন্টটি সরাসরি ছাড়িয়ে দিয়ে এবং ফাংশনটিকে স্বাভাবিক হিসাবে এগিয়ে যাওয়ার অনুমতি দিয়ে, ইভেন্টটি সেট হওয়ার আগেই ইভেন্টটি প্রকাশ করা হয়। আমার পরামর্শটি gotoCoffee আপনার gotoCoffee ফাংশনটি এতে আপডেট করুন:

 gotoCoffee = (e) => {
    const selectedCoffee = e.target.value
    this.setState({isLoading:true,select:selectedCoffee},() => 
     {console.log(this.state.select})
    setTimeout(()=>{
      this.setState({isLoading:false,redirect:true})
    },5000) 
  }

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

আমি প্রতিক্রিয়া এবং জাভাস্ক্রিপ্টে নতুন, তাই দুঃখিত যদি এটি খুব মৌলিক হয়।

আমার কাছে একটি মেনু উপাদান রয়েছে যা অনিকিকে একটি অ্যানিমেশন সরবরাহ করে এবং তারপরে অ্যাপটিকে অন্য পথে, /coffee পুনঃনির্দেশ করে।

আমি এই this.gotoCoffee ফাংশন this.gotoCoffee এবং this.state.select আপডেট করার জন্য ক্লিক করা (নির্বাচিত) মানটি পাস করতে চাই, তবে আমি কীভাবে জানি না, যেহেতু আমি this.state.coffees এই this.state.coffees সমস্ত আইটেম ম্যাপ করছি this.state.coffees ইভেন্ট।

আমি এটি কীভাবে করব এবং this.state.select আপডেট this.state.select ? ক্লিক করা মান থেকে নির্বাচন করুন?

আমার কোড:

class Menus extends Component{
  constructor (props) {
    super(props);
    this.state = { 
        coffees:[],
        select: '',      
        isLoading: false,
        redirect: false
    };
  };
  gotoCoffee = () => {
    this.setState({isLoading:true})
    setTimeout(()=>{
      this.setState({isLoading:false,redirect:true})
    },5000)
  }

  renderCoffee = () => {
    if (this.state.redirect) {
      return (<Redirect to={`/coffee/${this.state.select}`} />)
    }
  }

  render(){
    const data = this.state.coffees;

    return (
      <div>
        <h1 className="title is-1"><font color="#C86428">Menu</font></h1>
        <hr/><br/>
        {data.map(c => 
          <span key={c}>
            <div>
               {this.state.isLoading && <Brewing />}
               {this.renderCoffee()}
              <div onClick={() => this.gotoCoffee()} 
                  <strong><font color="#C86428">{c}</font></strong></div>
            </div>
          </span>)
        }
      </div>
    );
  }
}

export default withRouter(Menus);

আমি এই জাতীয় মানটি পাস করার চেষ্টা করেছি:

  gotoCoffee = (e) => {
    this.setState({isLoading:true,select:e})
    setTimeout(()=>{
      this.setState({isLoading:false,redirect:true})
    },5000) 
    console.log(this.state.select)
  }

একটি মত:

<div onClick={(c) => this.gotoCoffee(c)} 

অথবা তাই:

<div onClick={(event => this.gotoCoffee(event.target.value} 

তবে console.log(this.state.select) আমাকে উভয় console.log(this.state.select) জন্য ' console.log(this.state.select) ' দেখায়।

দেখা যাচ্ছে যে আমি 'সি' দিয়ে Class পাস করছি।

ব্রাউজারটি আমাকে ইউরিতে পুনর্নির্দেশের সময় অবিকল দেখায়:

http://localhost/coffee/[object%20Object]

এখন আমি যদি 'সি' কে {this.renderCoffee(c)} to এ ম্যাপ করা করি, যা {this.renderCoffee(c)} ইভেন্ট নয়, আমি অ্যারে আইটেমগুলি পাস করার জন্য পরিচালনা করি।

তবে আমার অবজেক্টটি নয়, ক্লিক করা মানটি 'সি' এই this.gotoCoffee(c) পাস করতে হবে এবং this.state.select আপডেট this.state.select

আমি কিভাবে এটা ঠিক করব?


সমস্ত উত্তর ঠিকঠাক দেখাচ্ছে এবং আপনার জন্য কাজ করছে এবং ক্লিক হ্যান্ডলারের সঠিক মানটি পাস না করে আপনি ভুল করেছেন তা স্পষ্ট। তবে আপনি যেহেতু এই যুগে নতুন রয়েছেন আমি ভেবেছিলাম আপনার এভাবে বাস্তবায়ন পরিবর্তন করা ভাল:

  • এটি মোটেই প্রয়োজনীয় ব্যবহারের নির্মাতা নয় এবং আপনি প্রাথমিক মানগুলির সাথে একটি রাষ্ট্রের সম্পত্তি ঘোষণা করতে পারেন:

    class Menus extends Component{
        state: {
            /* state properties */
        };
    }
  • আপনি যখন রেন্ডার পদ্ধতিতে ফাংশনগুলি ঘোষণা করেন এটি সর্বদা প্রতিটি রেন্ডারিং করে একটি নতুন তৈরি করে যার কিছু ব্যয় হয় এবং অনুকূলিত হয় না। আপনি তরকারী ব্যবহার করা ভাল:

    handleClick = selected => () => { /* handle click */ }
    render () {
        // ...
        coffees.map( coffee =>
            // ...
             <div onClick={ this.handleClick(coffee) }>
            // ...
    }
  • আপনি history.replace সাথে পুনঃনির্দেশ করতে পারেন যেহেতু আপনি নিজের উপাদানটি withRouter সাথে withRouter এবং এটি এখানে সহায়ক আপনাকে ক্লিকে পুনর্নির্দেশের কারণ এবং renderCoffee পদ্ধতি থেকে মুক্তি পান:

    handleClick = selected => () => 
        this.setState(
            { isLoading: true},
            () => setTimeout(
                () => {
                    const { history } = this.props;
                    this.setState({ isLoading: false });
                    history.replace(`/${coffee}`);
                }
                , 5000)
        );

যেহেতু Redirect রুটের বদলে দেয় এবং আমার মনে হয় আপনি স্বাভাবিক পৃষ্ঠা পরিবর্তন করতে চান না পরিবর্তে আমি history.push ব্যবহার করার পরামর্শ দিচ্ছি history.push


render বন্ধ হওয়ার সাথে সাথে আপনি gotoCoffee এলিমেন্টের index পাস করতে পারেন। তারপরে gotoCoffee - gotoCoffee কেবল সেই উপাদানটি এই this.state.coffees[index] হিসাবে অ্যাক্সেস করুন।

gotoCoffee = (index) => {
    this.setState({isLoading:true, select: this.state.coffees[index]})
    setTimeout(()=>{
      this.setState({isLoading:false,redirect:true})
    },5000)
  }

  render(){
    const data = this.state.coffees;

    return (
      <div>
        <h1 className="title is-1"><font color="#C86428">Menu</font></h1>
        <hr/><br/>
        {data.map((c, index) => 
          <span key={c}>
            <div>
               {this.state.isLoading && <Brewing />}
               {this.renderCoffee()}
              <div onClick={() => this.gotoCoffee(index)} 
                  <strong><font color="#C86428">{c}</font></strong></div>
            </div>
          </span>)
        }
      </div>
    );
  }
}






reactjs