reactjs - tutorial - react native




প্রতিক্রিয়ায় অপরিজ্ঞিত সম্পত্তি 'মানচিত্র' পড়তে পারে না (2)

অপরিবর্তিত prop.data জন্য একটি চেক সরবরাহ করুন এবং তারপরে উপাদানটি রেন্ডার করুন কারণ সম্ভবত সম্ভব হয় prop.data প্রাথমিকভাবে ডেটা সরবরাহ না করে তবে দ্বিতীয় রেন্ডারে পাওয়া যায়। এটি আপনার সমস্যার সমাধান করা উচিত

class App extends React.Component {
  render() {
    var data = [
{"transid":3426,"acct":"acct1","category":"Auto"},
 {"transid":3427,"acct":"acct2","category":"Subscriptions"}
]
    return (
        <div ><TransactionManagerView data={data}/></div>
    )
  }

}



const TransactionManagerView = function(props) {

  console.log(props.data);

  return (
    <ul>
      {
        props.data && props.data.map(function(el,index) {
           return <li key={index}>{el.category}</li>
        })
      }
    </ul>
  )

}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

আমার কাছে নিম্নলিখিত উপাদান রয়েছে যা একটি ধারক উপাদান থেকে ডাকা হচ্ছে। ধারক উপাদান লেনদেনের প্রপস পাস করে।

আমি জানি যে প্রোপযুক্ত ডেটা সম্পত্তিটি সূক্ষ্মভাবে পাস হচ্ছে এবং এতে ডেটা রয়েছে এবং কনসোল.লগ কল থেকে অ্যাক্সেস করা যেতে পারে। যাইহোক, আমি যখন ডেটা ম্যাপ করার এবং তালিকাটি তৈরি করার চেষ্টা করি তখন আমার একটি ত্রুটি ঘটে: Cannot read property 'map' of undefined

এখানে ডেটা দেখতে কেমন:

[
{"transid":3426,"acct":"acct1","category":"Auto"},
 {"transid":3427,"acct":"acct2","category":"Subscriptions"}
]

আমি কি ভুল করছি?

import React from 'react';


export default function TransactionManagerView (props) {

  console.log(props.data);

  return (
    <ul>
      {
        props.data.map(function(el,index) {
           return <li key={index}>{el.category}</li>
        })
      }
    </ul>
  )

}

কারণ উপাদান উপাদানটি অ্যারে গ্রহণের পূর্বে উপাদান সরবরাহ করে। বিকল্প হিসাবে, আপনি কোনও প্রোপের ডিফল্ট মান সেট করতে পারেন

import React from 'react';


export default function TransactionManagerView ({data = [], ...props}) {

  console.log(props.data);

  return (
    <ul>
      {
        data.map(function(el,index) {
           return <li key={index}>{el.category}</li>
        })
      }
    </ul>
  )

}






reactjs