คำถามติดแท็ก react-hooks

ผมจะผ่านเอกสารตะขอเมื่อฉัน stumbled useRefเมื่อ ดูตัวอย่างของพวกเขา ... 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> </> ); } ... มันดูเหมือนว่าจะถูกแทนที่ด้วยuseRefcreateRef function TextInputWithFocusButton() { const inputRef …

102 javascript  reactjs  react-hooks 

วิธีที่ถูกต้องในการอัปเดตสถานะคือวัตถุที่ซ้อนกันใน React with Hooks คืออะไร? export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) วิธีการหนึ่งที่จะใช้setExampleStateในการปรับปรุงexampleStateการa(ผนวกภาคสนาม)? const a = { masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b", fieldTwoTwo: "c" } }, masterField2: { fieldOne: "c", …

100 javascript  reactjs  react-hooks 

มีวิธีในการจำลองcomponentDidMountองค์ประกอบการทำงานของปฏิกิริยาผ่านตะขอหรือไม่?

99 javascript  reactjs  react-hooks 

ฉันคาดหวังว่าสถานะจะโหลดซ้ำเมื่อเปลี่ยนอุปกรณ์ประกอบฉาก แต่ไม่ได้ผลและuserตัวแปรไม่ได้รับการอัปเดตในการuseStateโทรครั้งต่อไปมีอะไรผิดปกติ 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 

ตามเอกสาร: componentDidUpdate()จะถูกเรียกใช้ทันทีหลังจากการอัปเดตเกิดขึ้น วิธีนี้ไม่ถูกเรียกใช้สำหรับการเรนเดอร์เริ่มต้น เราสามารถใช้useEffect()hook ใหม่เพื่อจำลองcomponentDidUpdate()ได้ แต่ดูเหมือนว่าuseEffect()จะถูกเรียกใช้หลังจากการเรนเดอร์ทุกครั้งแม้ในครั้งแรก ฉันจะทำให้มันไม่ทำงานในการเรนเดอร์ครั้งแรกได้อย่างไร ดังที่คุณเห็นในตัวอย่างด้านล่างcomponentDidUpdateFunctionถูกพิมพ์ในระหว่างการเรนเดอร์ครั้งแรก แต่componentDidUpdateClassไม่ได้ถูกพิมพ์ในระหว่างการเรนเดอร์ครั้งแรก function ComponentDidUpdateFunction() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log("componentDidUpdateFunction"); }); return ( <div> <p>componentDidUpdateFunction: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } class ComponentDidUpdateClass extends React.Component { constructor(props) { …

95 javascript  reactjs  react-hooks 

วิธีมาตรฐานในการใช้ React useState Hook มีดังต่อไปนี้: const [count, setCount] = useState(0); อย่างไรก็ตามconst countตัวแปรนี้จะถูกกำหนดใหม่ให้เป็นค่าดั้งเดิมที่แตกต่างกันอย่างชัดเจน ทำไมตัวแปรไม่ได้ถูกกำหนดเป็นlet count?

33 javascript  reactjs  ecmascript-6  react-hooks 

นี่คือปัญหา: ฉันพยายามโทร 2 ฟังก์ชั่นเมื่อคลิกปุ่ม ฟังก์ชั่นทั้งสองอัพเดทสถานะ (ฉันใช้ useState hook) ฟังก์ชันแรกอัปเดตค่า 1 อย่างถูกต้องเป็น 'ใหม่ 1' แต่หลังจาก 1 วินาที (setTimeout) ฟังก์ชั่นที่สองเริ่มทำงานและจะเปลี่ยนค่า 2 เป็น 'ใหม่ 2' แต่! ได้ตั้งค่า value1 กลับไปที่ '1' ทำไมสิ่งนี้จึงเกิดขึ้น ขอบคุณล่วงหน้า! import React, { useState } from "react"; const Test = () => { const [state, setState] = useState({ value1: "1", value2: …

31 javascript  reactjs  react-hooks 

ฉันกำลังพยายามหาวิธีใช้ผู้ฟัง Firebase เพื่อให้ข้อมูล firestore บนคลาวด์ได้รับการรีเฟรชด้วยการอัพเดต hooks ที่ตอบสนอง ตอนแรกฉันทำสิ่งนี้โดยใช้องค์ประกอบคลาสที่มีฟังก์ชั่น componentDidMount เพื่อรับข้อมูล firestore 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, }); } สิ่งนี้จะหยุดลงเมื่อหน้าอัปเดตดังนั้นฉันจึงพยายามหาวิธีย้ายตัวฟังเพื่อโต้ตอบฮุก ฉันได้ติดตั้งreact-firebase-hooks แล้ว - แม้ว่าฉันไม่สามารถหาวิธีการอ่านคำแนะนำเพื่อให้สามารถใช้งานได้ ฉันมีองค์ประกอบฟังก์ชั่นดังนี้ import React, { useState, useEffect } from 'react'; import { useDocument } from 'react-firebase-hooks/firestore'; import …

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

ฉันกำลังใช้เบ็ดประวัติศาสตร์ใหม่ของ React Router ซึ่งออกมาเมื่อไม่กี่สัปดาห์ที่ผ่านมา เวอร์ชั่น React-router ของฉันคือ 5.1.2 React ของฉันอยู่ที่เวอร์ชัน 16.10.1 คุณสามารถค้นหารหัสของฉันที่ด้านล่าง แต่เมื่อฉันนำเข้าการใช้งานใหม่ประวัติจาก react-router ฉันได้รับข้อผิดพลาดนี้: Uncaught TypeError: Cannot read property 'history' of undefined ซึ่งเกิดจากสายนี้ใน React-router function useHistory() { if (process.env.NODE_ENV !== "production") { !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in …

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

React Hooks ให้เราใช้ตัวเลือก State และฉันจะเห็นการเปรียบเทียบ Hooks กับ Class-State เสมอ แต่สิ่งที่เกี่ยวกับ hooks และตัวแปรปกติบางอย่าง? ตัวอย่างเช่น, function Foo() { let a = 0; a = 1; return <div>{a}</div>; } ฉันไม่ได้ใช้ Hooks และมันจะให้ผลลัพธ์เหมือนกับ: function Foo() { const [a, setA] = useState(0); if (a != 1) setA(1); // to avoid infinite-loop return <div>{a}</div>; } แล้วความแตกต่างคืออะไร? …

12 javascript  node.js  reactjs  react-hooks 

ฉันกำลังทำเบ็ดแบบกำหนดเองที่มี toogle เมื่อบางสถานะเปลี่ยนไป คุณควรจะสามารถผ่านสถานะใด ๆ ในอาร์เรย์ import { useState, useEffect } from 'react' const useFlatListUpdate = (dependencies = []) => { const [toggle, setToggle] = useState(false) useEffect(() => { setToggle(t => !t) }, [...dependencies]) return toggle } export default useFlatListUpdate และควรใช้เป็น const toggleFlatList = useFlatListUpdate([search, selectedField /*, anything */]) แต่มันเตือนฉันต่อไปนี้ …

10 reactjs  react-native  eslint  react-hooks 

เมื่ออยู่ในสภาพแวดล้อมการพัฒนาแอพของฉันทำงานได้ดี เมื่ออยู่ในสภาพแวดล้อมการผลิตจะเกิดข้อผิดพลาด: Uncaught TypeError: (0 , _react.useEffect) is not a function มันเกิดขึ้นในไฟล์ที่ฉันสร้างขึ้นที่ฉันนำเข้า React และ useEffect ดังนี้: import React, { useEffect } from 'react' const X = () => { useEffect(() => { ... }) ... } เพิ่ม console.log ด้านล่างบรรทัดนี้ยืนยันว่า useEffect ไม่ได้กำหนดแน่นอนเมื่ออยู่ในการผลิตและฟังก์ชั่นที่คาดหวังเมื่ออยู่ใน dev ฉันตรวจสอบ package.json, yarn.lock & node_modules ของฉันสำหรับรุ่น react หรือ …

10 javascript  reactjs  react-hooks  parceljs 

ฉันต้องการให้ผู้ใช้สามารถเรียงลำดับรายการสิ่งที่ต้องทำ เมื่อผู้ใช้เลือกรายการจากเมนูแบบเลื่อนมันจะตั้งค่าsortKeyซึ่งจะสร้างรุ่นใหม่setSortedTodosและในทริกเกอร์เปิดและโทรuseEffectsetSortedTodos ด้านล่างนี้เป็นตัวอย่างการทำงานว่าฉันต้องการ แต่ eslint จะแจ้งให้ฉันเพื่อเพิ่มtodosไปยังuseEffectอาร์เรย์ dependancy และถ้าผมทำมันทำให้เกิดห่วงอนันต์ (ตามที่คุณคาดว่าจะได้) const [todos, setTodos] = useState([]); const [sortKey, setSortKey] = useState('title'); const setSortedTodos = useCallback((data) => { const cloned = data.slice(0); const sorted = cloned.sort((a, b) => { const v1 = a[sortKey].toLowerCase(); const v2 = b[sortKey].toLowerCase(); if (v1 < v2) { return …

9 javascript  reactjs  react-hooks  eslint