Uzman React çı var mı

[lovecraft0Z]

Bir problemim var kafayı kıracağım. Hooks useState değişmesine rağmen sayfayı güncellemiyor, İyi bilen varsa 5 dk bağlanıp bilg dan bakabilir miyiz

[Laorx]

Hiç kullanmadım ama react 10 yıllık dil nerdeyse, şu sordufunada 10 farklı stackoverflow çözümü bulunacağına eminim.

[senko]

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

[Oce4n]

bazen dosyayı save etmediğim için ekrana bişiylerin çıkmadığı çok oldu bende mesela.

[lovecraft0Z]

şö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>

 

Mayıs 23, 2022 lovecraft0Z tarafından düzenlendi

[lovecraft0Z]

fonksyonun parametrelere takmayın onları şu an kullanmıyorum

[senko]

setHtmlArray([...array2])

sekline bir dener misin?

[lovecraft0Z]

hocam bu kısmı çözdüm tamamdır. Bana bir de delete lazım o kısmı nasıl yaparız

[df]

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.

Mayıs 24, 2022 df tarafından düzenlendi

[DoruK]

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.

Mayıs 25, 2022 DoruK tarafından düzenlendi

[DoruK]

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