ReactJS පුලුවන් අය පොඩ්ඩක් එන්න (Help!)

[Sexy Somapala]

@Sexy Somapala Machan, rendering two times is actually not a bug. It's a feature. So you need to design your code in a way that it is not a problem for the component to unmounted and then mounted again. I took your code and change a bit it as follows. Though the render happens two times the list only shows up when the response gets back with data.

It is good you asked this question. I was also not 100% sure what's going on so had to dig in.

import React, { Component } from 'react';
class App extends Component{
constructor(){
super()
this.state = {
monsters: []
}
}
componentDidMount() {
console.log("inside componentDidMount");
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((users) => {
this.setState({monsters: users})
console.log(this.state.monsters)
})
}
render(){
return(
<>
{ this.state.monsters.map((monster) => {
<h1 key={monster.id}>{ monster.name }</h1>
})}
</>

)
}
}
export default App;

mchn even though your code shows array with relevant items once, there is an empty array printing on the console. couldn't we solve that one too?

Matath ohoma vela strict mode ayn kalama hari giya. Rendering bugs ehema hoya ganna lesi vennalu ehema thiyenne

bugs scene ekanam danne na machan mama hariyata. but mama danna widihata parana old syntax use karama warnings denna ehema thama oya strict mode eka thiyenne. bugs nuth penwanawa athi maybe.

issarahata oya wage question awama chatGPT eketh dala balanna

oooo eka thama

 

[Anonymous_Abstract]

Typical Sri Lankan Developer මමද උඹද බං? බලපන් මම මෙතන ප්‍රශ්නයක් ඇහුවම උඩ ඉන්න සුපිරි කොල්ලෝ ටිකක් උන්ගේ Perspective එකෙන් බලලා උත්තරේ දීලා තියෙනවා (@CodeMan , @SkullVamp , @හෙළයෙක් , @AlphaStigma ). අනික මම කියලා තියෙනවා මම Beginner Level එකෙක් බුවෙක් කියලා. තාම මුල් හරියෙ ඉන්නේ. මේක Production Build එකට Affect වෙන්නේ නෑ කියන්න උඹ වගේ Senior Software Engineer (උඹේ රිප්ලයි එක දැක්කම මට එහෙම හිතුනේ ) කෙනෙක් ගෙන් අදහසක් ඕනෙ නෑ මට. ඒක මම වගේ Beginner Level එකෙක්ට තේරෙනවා. මට ඕන වුණේ Behind the scenes Code එකේ වෙන්නේ මොකක්ද කියලා දැනගන්න මිසක් උඹලා වගේ Code එකක Unexpected දෙයක් Output වුණාම Production Build එකට Effect වෙනවද නැද්ද කියලා බලලා Effect වෙන්නේ නැත්නම් Code එක Use කරන ජාතියේ දෙකයි පනහේ Software Engineer කෙනෙක් වෙන්නේ නෙවේ. උඹේ Professionalism ගතිය උඹ රිප්ලයි එක දාපු හැටියෙන පේනවා මට. ආයෙ මිනිහෙක් දෙයකට උත්තරයක් ඇහුවම තමන් දන්න දේ ලොකු කරලා පෙන්නන්නේ නැතිව නිහතමානීව උත්තරයක් දීපන්. Coding වලට කලින් ඉගෙනගන්න දේවල් ගොඩක් උඹට තියෙනවා. යට පොටෝ එකයි උඹේ Professionalism ගතියෙයි කිසිම සම්බන්ධයක් නෑලු ඉතින්.

mona huththakda ban meh mu rachana liyala. me vage dekata mehma trigger venava kiyanne programming kesewethath ubala vage unta meh loke jiwath venna nam godak amarui ban . typical sri lankan nikan trigger vela rachana liyana

 

[CodeMan]

mchn even though your code shows array with relevant items once, there is an empty array printing on the console. couldn't we solve that one too?


bugs scene ekanam danne na machan mama hariyata. but mama danna widihata parana old syntax use karama warnings denna ehema thama oya strict mode eka thiyenne. bugs nuth penwanawa athi maybe.

oooo eka thama

Not actually machan, In this case your thinking should be changed towards not preventing the double execution but to make sure your code adhere to the react way of doing things. Here this double execution is intended by react implementation and we should design our code to utilize it.

 

[Sexy Somapala]

Not actually machan, In this case your thinking should be changed towards not preventing the double execution but to make sure your code adhere to the react way of doing things. Here this double execution is intended by react implementation and we should design our code to utilize it.

okay machan, maybe i'm thinking too much about it. btw thanks for your example code bruh. On my first code I put console.log as a callback function just to make sure it runs after everything completed. but after referring your code, now I know more precisely how the callbacks work and it is a good example. <3

 

[acerBro]

Bro class components dan out dated. Switch to functional components.

 

[CodeMan]

Bro class components dan out dated. Switch to functional components.

yep. but better to have at least basic understanding in class components in order to deal with legacy code bases.

 

[mahadana_muththa]

ස්ට්‍රයික් මොඩ් අයින් කරන්න එපා.component tree එකේ උඩ ඉඳන් පහලට එන්න. කොහේ හරි තැනක් ඇති unmount mount වෙන. ඒක හදන්න.

 

[Any.key]

bump

 

[nevermindNevergiveup]

StackOverflow

 

[Master malli]

Up

 

[Mr.Sawyer]

Not actually machan, In this case your thinking should be changed towards not preventing the double execution but to make sure your code adhere to the react way of doing things. Here this double execution is intended by react implementation and we should design our code to utilize it.

This

 

[Sexy Somapala]

ස්ට්‍රයික් මොඩ් අයින් කරන්න එපා.component tree එකේ උඩ ඉඳන් පහලට එන්න. කොහේ හරි තැනක් ඇති unmount mount වෙන. ඒක හදන්න.

Strict Mode එක අයින් කරන එක Case එකක් වගේ තමා නේද...මේකේ එහෙම ලොකු Component Tree එකක් නෑ බං. App එකටම තියෙන්නේ ඔය Component එක විතරමයි.

StackOverflow

Not posted by myself. But I looked through similar questions and wasn't able to find a solution.

This

<3