हैलो मित्रों! आशा है, आप कुशल हैं।

मेरे पास WorldInfo नामक एक तीर फ़ंक्शन है और इसका मूल घटक किसी ऑब्जेक्ट को प्रोप में पास कर रहा है कि इस उदाहरण के लिए, मैं सिर्फ object को कॉल कर रहा हूं। अब WorldInfo में भी मैं items को object में पार्स और सूचीबद्ध करना चाहता हूं, इसलिए मैंने object लेने के लिए serverInfoTabList विधि बनाई है और इसे दूर किया है .map। मेरी समस्या यह है कि जब संकलित किया जाता है, तो मेरा ब्राउज़र serverInfoTabList को या तो परिभाषित नहीं करता है और न ही WorldInfo के स्वयं के रिटर्न फ़ंक्शन में कॉल किया जाता है।

यहाँ त्रुटि और कोड ही है।

 Line 7:5:    'serverInfoTabList' is not defined  no-undef
 Line 34:22:  'serverInfoTabList' is not defined  no-undef
const WorldInfo = (props) =>  {

    serverInfoTabList = (object) => {
        if (object != undefined){
            return object.item.map((item) => {
                const time = Math.trunc(item.time/60)
                return (
                    <li key={item._id}>{item.name}
                        <br/>
                        Minutes Online: {time}
                    </li>
                );
            });
        }
    }

    return (
        props.object!= undefined ? 
        <div className={props.className}>
            <h1>{props.world.map}</h1>
            {/* <img src={props.object.image}/> */}
            <div>
                <ul>  
                    {serverInfoTabList(props.object)}
                </ul>
            </div>
        </div>
        : 
        null
    );
}

आपके समय के लिए धन्यवाद दोस्तों!

0
ThirdGhostHand 30 अक्टूबर 2019, 18:25

1 उत्तर

सबसे बढ़िया उत्तर

आप const घोषणा भूल गए

const serverInfoTabList = (object) => {
    /* ... */
}

दूसरी समस्या यह है कि आप उन संपत्तियों तक पहुंच रहे हैं जो मौजूद नहीं हैं props.world उदाहरण के लिए। साथ ही आप एक अपरिभाषित संपत्ति props.object.item के माध्यम से मानचित्रण कर रहे हैं। मैंने आपका सैंडबॉक्स ठीक कर दिया है

const WorldInfo = props => {
  const serverInfoTabList = object => {
    return Object.keys(object).map(key => {
      const item = object[key];
      const time = Math.trunc(item.time / 60);
      return (
        <li key={item._id}>
          {item.name}
          <br />
          Minutes Online: {time}
        </li>
      );
    });
  };

  return props.object ? (
    <div className={props.className}>
      <h1>{props.world.map}</h1>
      {/* <img src={props.object.image}/> */}
      <div>
        <ul>{serverInfoTabList(props.object)}</ul>
      </div>
    </div>
  ) : null;
};

class Todo extends Component {
  render() {
    const object = { item1: { _id: 1, time: 1 }, Item2: { _id: 2, time: 2 } };
    return (
      <div>
        <WorldInfo object={object} world={{ map: "foo" }} />
      </div>
    );
  }
}

Edit React example

2
Dupocas 30 अक्टूबर 2019, 16:31