«react-hooks» etiketlenmiş sorular

Karşılaştığım zaman kancaların belgelerine bakıyordum useRef. Örneğine bakarken… function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } … İle useRefdeğiştirilebilir gibi …

104 javascript  reactjs  react-hooks 

React with Hooks'ta durumu güncellemenin doğru yolu nedir, yuvalanmış bir nesne mi? export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) İnsan nasıl kullanacağı setExampleStategüncelleme exampleStateiçin a(bir alan ekleme)? const a = { masterField: { …

103 javascript  reactjs  react-hooks 

componentDidMountReact fonksiyonel bileşenlerini kancalar aracılığıyla simüle etmenin yolları var mı?

99 javascript  reactjs  react-hooks 

Durum değişikliğinde yeniden yüklenmesini bekliyorum, ancak bu çalışmıyor ve userdeğişken bir sonraki useStatearamada güncellenmiyor , sorun nedir? function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); } Codepen

95 reactjs  react-hooks 

Dokümanlara göre: componentDidUpdate()güncelleme gerçekleştikten hemen sonra çağrılır. Bu yöntem, ilk oluşturma için çağrılmaz. Yeni useEffect()kancayı simüle etmek için kullanabiliriz componentDidUpdate(), ancak useEffect()her işlemeden sonra, hatta ilk seferinde çalıştırılıyor gibi görünüyor . İlk işlemede çalışmamasını nasıl sağlayabilirim? Aşağıdaki örnekte görebileceğiniz gibi, componentDidUpdateFunctionilk oluşturma sırasında yazdırıldı, ancak ilk oluşturma componentDidUpdateClasssırasında yazdırılmadı. function …

95 javascript  reactjs  react-hooks 

Sorunumu kolayca sormak için bu kodun sonucunu açıklayayım. const ForExample = () => { const [name, setName] = useState(''); const [username, setUsername] = useState(''); useEffect(() => { console.log('effect'); console.log({ name, username }); return () => { console.log('cleaned up'); console.log({ name, username }); }; }, [username]); const handleName = e => …

94 reactjs  react-hooks 

React useState Hook'u kullanmanın standart yolu şudur: const [count, setCount] = useState(0); Ancak bu const countdeğişken açıkça farklı bir ilkel değere atanacaktır. O zaman değişken neden olarak tanımlanmadı let count?

33 javascript  reactjs  ecmascript-6  react-hooks 

İşte sorun: Bir düğme tıklamasıyla 2 işlevi çağırmaya çalışıyorum. Her iki fonksiyon da durumu günceller (useState kancasını kullanıyorum). İlk işlev, değer1'i 'yeni 1' olarak doğru şekilde günceller, ancak 1 saniye sonra (setTimeout) ikinci işlev patlar ve değer 2'yi 'yeni 2' olarak değiştirir AMA! Değer1'i tekrar '1'e ayarlar. Bu neden oluyor? …

31 javascript  reactjs  react-hooks 

Bulut firestore verileri tepki kanca güncellemeleri ile yenilenir, böylece bir Firebase dinleyici kullanmayı anlamaya çalışıyorum. Başlangıçta, ben firestore veri almak için bir componentDidMount işlevi ile bir sınıf bileşeni kullanarak yaptı. this.props.firebase.db .collection('users') // .doc(this.props.firebase.db.collection('users').doc(this.props.firebase.authUser.uid)) .doc(this.props.firebase.db.collection('users').doc(this.props.authUser.uid)) .get() .then(doc => { this.setState({ name: doc.data().name }); // loading: false, }); } Sayfa güncellendiğinde …

27 javascript  reactjs  firebase  google-cloud-firestore  react-hooks 

Birkaç hafta önce çıkan React Router'ın yeni kullanım geçmişini kullanıyorum. React-router versiyonum 5.1.2. Tepkim 16.10.1 sürümündedir. Kodumu altta bulabilirsiniz. Yine de tepki yönlendiriciden yeni useHistory'i içe aktardığımda şu hatayı alıyorum: Uncaught TypeError: Cannot read property 'history' of undefined React-router'daki bu hattın neden olduğu function useHistory() { if (process.env.NODE_ENV !== "production") …

18 reactjs  react-router  react-hooks  react-router-dom  react-context 

React Hooks bize useState seçeneğini veriyor ve her zaman Hooks ile Class-State karşılaştırmasını görüyorum. Peki ya Kancalar ve bazı düzenli değişkenler? Örneğin, function Foo() { let a = 0; a = 1; return <div>{a}</div>; } Hooks'u kullanmadım ve bana aynı sonuçları verecek: function Foo() { const [a, setA] = useState(0); …

12 javascript  node.js  reactjs  react-hooks 

Bazı eyalet değiştiğinde bir toogle olan özel bir kanca yapıyorum. Bir dizideki herhangi bir durumu geçirebilmeniz gerekir. import { useState, useEffect } from 'react' const useFlatListUpdate = (dependencies = []) => { const [toggle, setToggle] = useState(false) useEffect(() => { setToggle(t => !t) }, [...dependencies]) return toggle } export default …

10 reactjs  react-native  eslint  react-hooks 

geliştirme ortamında, benim app gayet iyi çalışıyor. Üretim ortamında hatayla kilitleniyor: Uncaught TypeError: (0 , _react.useEffect) is not a function React ve useEffect'i içe aktardığım yerde oluşturduğum bir dosyada olur: import React, { useEffect } from 'react' const X = () => { useEffect(() => { ... }) ... } …

10 javascript  reactjs  react-hooks  parceljs 

Kullanıcının yapılacak iş öğelerinin listesini sıralayabilmesini istiyorum. Kullanıcılar bir açılır menüden bir öğe seçtiğinde, öğenin sortKeyyeni bir sürümünü oluşturacak setSortedTodosve ardından useEffectve çağrısını tetikleyecektir setSortedTodos. Örneğin aşağıda, tam istediğim nasıl çalışır ancak eslint eklemek için beni kışkırtan, todoshiç useEffectdependancy dizisi ve bunu yaparsam (beklediğiniz gibi) o sonsuz döngüye neden olur. …

9 javascript  reactjs  react-hooks  eslint