Jump to content
Forumu Destekleyenlere Katılın ×
Paticik Forumları
2000 lerden beri faal olan, çok şukela bir paylaşım platformuyuz. Hoşgeldiniz.

Uzman React çı var mı


lovecraft0Z

Öne çıkan mesajlar

Bir koy kodu hocam, bakalim. Bir collection icinde birsey degistirdiysen react collection'in icinin degisip degismedigni bilemez, collection'in referansina bakar. Genelde bundan dolayi useState de degistirdim neden render'i triggerlamadi sorusu soruluyor, ama bambaska bisi de olabilir

Link to comment
Sosyal ağlarda paylaş



şöyle bir paylaşayım madem;

şimdi UI da bir element var, ona add dedikçe yeni element ekliyor. Bu her elementin de yanında trash icon var, ona basınca bu bastığı elementin silinmesi lazım, basit yani.

Şimdi ben bu lementleri state te bir arrayde saklıyorum

silinince de bu arrayin içinden sadece o element çıksın istiyorum.

 

const [htmlArray, setHtmlArray] = useState([]);

Bakın şu aşağıda butona clicklediğinde addHtml fonsyonunu çalıştıracak

 <div
                className='card'
                style={{
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  width: '100%',
                  alignItems: 'flex-start',
                  padding: '20px 200px 20px 30px ',
                  marginTop: 20,
                }}
              >
                <p>Register Date</p>
                <div>
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}
                  >
                    <DatePickerWrapper
                      popperContainer={Popper}
                      calendarContainer={Calendar}
                      selected={startDate}
                      onChange={(date) => setStartDate(date)}
                    />
                    <button
                      className='btn btn-outline-primary'
                      onClick={(i) => addHtml('and', 'register')}
                    >
                      and
                    </button>
                    <button
                      className='btn btn-outline-primary'
                      onClick={() => addHtml('or', 'register')}
                    >
                      or
                    </button>
                    <button
                      className='btn btn-outline-primary'
                      onClick={() => setHtmlArrayReg([])}
                    >
                      <svg
                        height='20px'
                        id='Layer_1'
                        style={{ enableBackground: 'new 0 0 512 512' }}
                        version='1.1'
                        viewBox='0 0 512 512'
                        xmlSpace='preserve'
                        xmlns='http://www.w3.org/2000/svg'
                        xmlnsXlink='http://www.w3.org/1999/xlink'
                      >
                        <g>
                          <path d='M413.7,133.4c-2.4-9-4-14-4-14c-2.6-9.3-9.2-9.3-19-10.9l-53.1-6.7c-6.6-1.1-6.6-1.1-9.2-6.8c-8.7-19.6-11.4-31-20.9-31   h-103c-9.5,0-12.1,11.4-20.8,31.1c-2.6,5.6-2.6,5.6-9.2,6.8l-53.2,6.7c-9.7,1.6-16.7,2.5-19.3,11.8c0,0-1.2,4.1-3.7,13   c-3.2,11.9-4.5,10.6,6.5,10.6h302.4C418.2,144.1,417,145.3,413.7,133.4z' />
                          <path d='M379.4,176H132.6c-16.6,0-17.4,2.2-16.4,14.7l18.7,242.6c1.6,12.3,2.8,14.8,17.5,14.8h207.2c14.7,0,15.9-2.5,17.5-14.8   l18.7-242.6C396.8,178.1,396,176,379.4,176z' />
                        </g>
                      </svg>
                    </button>
                  </div>
                  <div>{htmlArrayReg.map((elem) => elem)}</div>
                </div>

AddHtml şöyle:;

const addHtml = (word, kind) => {
    let array2 = htmlArray;
    array2.push(<DateItem onDelete={onDelete} />);
    console.log(array2)
    setHtmlArray(array2);

bu Date item aynısı, diger componenttan çağırıp ekliyor.

 

Eklemede sorun yok, yani htmlArray konsolda gözüküyor, her basışta arrayin length i artıyor fakat gel görki UI da hiçbirşey gözükmüyor, anlık güncellemiyor yani her basışta.


UI da bastığı yerde şurası

 <div>{htmlArray && htmlArray.map((elem) => elem)}</div>

 

lovecraft0Z tarafından düzenlendi
Link to comment
Sosyal ağlarda paylaş

setState e verdiğin objenin referansı değişmeli. referans değiştirmeden içeriğini değiştiriren refresh olmaz. senkonun yaptığı şekilde yeni array yaratman lazım spread syntax ile. silerkende eski arrayden remove etmeyip setHtmlArray([]) gibi yapabilirsin.

tek eleman sileceksen filter yapabilirsin. setHtmlArray([...htmlArray.filter(i => i.id === blabla)]) şeklinde. filter içeriğini kafana göre koy sileceğin şeyi nasıl buluyorsan. ya da array içinden silip yine senkonun yaptığı yere silinmiş arrayin son halini koy. farketmez.

df tarafından düzenlendi
Link to comment
Sosyal ağlarda paylaş

tldr: senko ve df'nin dedigi gibi state'e verdigin object instance'ini mutate edemezsin, kopyalayip yeni object koyman gerekir. bir sey ekleyeceksen once current state'de ne varsa onu kopyalayip, kopyayi mutate edip, sonra o kopyayi state'e koyman gerekli.

 

array, map, set, bunlarin hepsi object subclass. array instance yaratmak icin literal `[]` kullandigin zaman yeni bir array instance ediyorsun ve buna assign ettigin variable da memory'de bir adrese point ediyor. bu variable uzerinden yaptigin her in-place mutasyon (.push(), .shift(), .unshift() .splice() gibi) memory'de bulunan array uzerinde yapilir. bunu yaptigin zaman state'deki object ayni kalacagi icin react virtual dom hesaplamalarini yaparken object ayni object bunu ayni birakalim der ve rerender etmez. ayni sey primitive typelar icin de gecerli. bir state 2 ise setState(2) yaparsan react bundan kaynakli rerender yapmaz.

dikkat edersen bunlardan farkli olarak .filter() .map() .slice() gibi fonksiyonlar sana array'i kopyalayip return eder, memory'deki array'a dokunmaz (eger bu fonksiyonlarin icinde orjinal array'e in-place mutation yapacak bir fonksiyon kullanmazsan). bu yuzden bunlari shorthand olarak kullanabilirsin. ya da .reduce() ile biraz pratik yap hepsi ondan geliyor zaten.

DoruK tarafından düzenlendi
Link to comment
Sosyal ağlarda paylaş

bir de array'e react node atip onu renderlamak yerine array'e content atip map fonksiyonundan node return etmek isini kolaylastirabilir.

const [dates, setDates] = useState([]);

const add = (a, b) => {
  const newDates = [...dates, {a, b}];
  setDates(newDates);
}

const remove = (a) => {
  const newDates = dates.filter(x => x.a !== a);
  setDates(newDates);
}

return dates.map((date) => <DateItem key={date.b} onDelete={onDelete} />) // gibi

 

Link to comment
Sosyal ağlarda paylaş

×
×
  • Yeni Oluştur...