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

useEffect React เบ็ดจะทำงานที่ผ่านมาในการทำงานในทุกการเปลี่ยนแปลง สิ่งนี้สามารถปรับให้เหมาะสมเพื่อให้มันโทรเฉพาะเมื่อคุณสมบัติที่ต้องการเปลี่ยนไป จะเกิดอะไรขึ้นถ้าฉันต้องการเรียกใช้ฟังก์ชันการเริ่มต้นcomponentDidMountและไม่เรียกมันอีกครั้งจากการเปลี่ยนแปลง สมมติว่าฉันต้องการโหลดเอนทิตี แต่ฟังก์ชั่นการโหลดไม่ต้องการข้อมูลใด ๆ จากส่วนประกอบ เราจะทำสิ่งนี้โดยใช้useEffectเบ็ดได้อย่างไร class MyComponent extends React.PureComponent { componentDidMount() { loadDataOnlyOnce(); } render() { ... } } ด้วย hooks นี้อาจมีลักษณะเช่นนี้: function MyComponent() { useEffect(() => { loadDataOnlyOnce(); // this will fire on every change :( }, [...???]); return (...); }

210 javascript  reactjs  react-hooks 

ด้วย React 16.8.6 (ดีในเวอร์ชันก่อนหน้า 16.8.3) ฉันได้รับข้อผิดพลาดนี้เมื่อฉันพยายามป้องกันลูปไม่สิ้นสุดในคำขอดึงข้อมูล ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it or remove the dependency array react-hooks/exhaustive-deps ฉันไม่พบวิธีแก้ปัญหาที่หยุดลูปไม่สิ้นสุด useReducer()ผมต้องการที่จะอยู่ห่างจากการใช้ ฉันพบการสนทนานี้https://github.com/facebook/react/issues/14920ซึ่งการแก้ปัญหาที่เป็นไปได้คือYou can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.ฉันไม่มั่นใจในสิ่งที่ฉันทำดังนั้นฉันยังไม่ได้ลองใช้งานเลย ฉันมีการตั้งค่าปัจจุบันนี้React hook useEffect จะทำงานอย่างต่อเนื่องตลอดไป / วนซ้ำไม่สิ้นสุดและความคิดเห็นเพียงอย่างเดียวคือuseCallback()สิ่งที่ฉันไม่คุ้นเคย วิธีที่ฉันใช้อยู่ในปัจจุบันuseEffect()(ซึ่งฉันต้องการเรียกใช้ครั้งเดียวในจุดเริ่มต้นที่คล้ายกับcomponentDidMount()) useEffect(() …

180 reactjs  eslint  create-react-app  react-hooks 

สมมติว่าฉันมี 3 อินพุต: rate, sendAmount และ earnAmount ฉันใส่ 3 อินพุตนั้นไว้ใช้ กฎคือ: ถ้า sendAmount เปลี่ยนแปลงฉันจะคำนวณ receiveAmount = sendAmount * rate หากได้รับการเปลี่ยนแปลงฉันคำนวณ sendAmount = receiveAmount / rate หากอัตราเปลี่ยนแปลงฉันคำนวณว่าreceiveAmount = sendAmount * rateเมื่อใดsendAmount > 0หรือคำนวณsendAmount = receiveAmount / rateเมื่อใดreceiveAmount > 0 นี่คือรหัสแซนด์บ็อกซ์https://codesandbox.io/s/pkl6vn7x6jเพื่อสาธิตปัญหา มีวิธีที่จะเปรียบเทียบได้oldValuesและnewValuesต้องการบนcomponentDidUpdateแทนการขนย้ายวัสดุ 3 สำหรับกรณีนี้หรือไม่? ขอบคุณ นี่คือทางออกสุดท้ายของฉันกับusePrevious https://codesandbox.io/s/30n01w2r06 ในกรณีนี้ฉันไม่สามารถใช้หลายรายการได้useEffectเนื่องจากการเปลี่ยนแปลงแต่ละครั้งนำไปสู่การโทรในเครือข่ายเดียวกัน นั่นเป็นเหตุผลที่ฉันใช้changeCountเพื่อติดตามการเปลี่ยนแปลงด้วย changeCountนอกจากนี้ยังมีประโยชน์ในการติดตามการเปลี่ยนแปลงจากภายในเครื่องเท่านั้นดังนั้นฉันจึงสามารถป้องกันการโทรเครือข่ายที่ไม่จำเป็นเนื่องจากการเปลี่ยนแปลงจากเซิร์ฟเวอร์

178 reactjs  react-hooks 

ในเอกสารทางการของ React ที่กล่าวถึง - หากคุณคุ้นเคยกับวิธีวงจรชีวิตของคลาส React คุณสามารถคิดถึง useEffect Hook เป็น componentDidMount, componentDidUpdate และ componentWillUnmount รวมกัน คำถามของฉันคือ - เราจะใช้componentWillMount()วิธี lifecyle ในเบ็ดได้อย่างไร

176 javascript  reactjs  jsx  react-hooks 

ฉันพยายามเรียนรู้ hooks และuseStateวิธีการทำให้ฉันสับสน ฉันกำลังกำหนดค่าเริ่มต้นให้กับรัฐในรูปแบบของอาร์เรย์ วิธีการในการตั้งค่าuseStateจะไม่ทำงานสำหรับฉันแม้จะมีหรือspread(...) without spread operatorฉันได้ทำ API บนพีซีเครื่องอื่นที่ฉันกำลังเรียกและดึงข้อมูลที่ฉันต้องการตั้งค่าเป็นสถานะ นี่คือรหัสของฉัน: import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; const StateSelector = () => { const initialValue = [ { category: "", photo: "", description: "", id: 0, name: "", rating: 0 } ]; const [movies, …

168 javascript  reactjs  react-hooks 

ฉันกำลังลองuseEffectตัวอย่างด้านล่าง: useEffect(async () => { try { const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`); const json = await response.json(); setPosts(json.data.children.map(it => it.data)); } catch (e) { console.error(e); } }, []); และฉันได้รับคำเตือนนี้ในคอนโซลของฉัน แต่การล้างข้อมูลเป็นทางเลือกสำหรับการเรียก async ที่ฉันคิด ฉันไม่แน่ใจว่าทำไมฉันถึงได้รับคำเตือนนี้ ตัวอย่างการเชื่อมโยงแซนด์บ็อกซ์ https://codesandbox.io/s/24rj871r0p

155 javascript  reactjs  react-hooks 

ฉันกำลังพยายามใช้ react hooks สำหรับปัญหาง่ายๆ const [personState,setPersonState] = useState({ DefinedObject }); ด้วยการอ้างอิงต่อไปนี้ "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.0" } แต่ฉันยังคงได้รับข้อผิดพลาดต่อไปนี้: ./src/App.js บรรทัดที่ 7: React Hook "useState" ถูกเรียกในฟังก์ชัน "app" ซึ่งไม่ใช่ทั้งส่วนประกอบของฟังก์ชัน React หรือฟังก์ชัน React Hook ที่กำหนดเอง react-hooks / rules-of-hooks บรรทัดที่ 39: 'state' ไม่ได้กำหนดไว้ว่า no-undef ค้นหาคำหลักเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับข้อผิดพลาดแต่ละข้อ รหัสส่วนประกอบอยู่ด้านล่าง: import React, {useState} from 'react'; …

152 reactjs  react-hooks 

ฉันกำลังเรียนรู้แนวคิด hooks ใน React และพยายามทำความเข้าใจตัวอย่างด้านล่าง import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ตัวอย่างข้างต้นจะเพิ่มตัวนับในพารามิเตอร์ฟังก์ชันตัวจัดการเอง จะเกิดอะไรขึ้นถ้าฉันต้องการแก้ไขค่าการนับภายในฟังก์ชันตัวจัดการเหตุการณ์ …

134 javascript  reactjs  react-native  react-hooks 

วิธีการผลักองค์ประกอบภายใน useState array React hook? นั่นเป็นวิธีการเก่าในสถานะปฏิกิริยาหรือไม่? หรือสิ่งใหม่ ๆ ? เช่นsetState push example ?

127 javascript  reactjs  react-hooks 

สมมติว่าฉันมีสถานะบางอย่างที่ขึ้นอยู่กับสถานะอื่น (เช่นเมื่อ A เปลี่ยนแปลงฉันต้องการให้ B เปลี่ยน) เหมาะสมหรือไม่ที่จะสร้างตะขอที่สังเกตเห็น A และตั้งค่า B ไว้ในตะขอ useEffect เอฟเฟกต์จะเรียงซ้อนเช่นนั้นหรือไม่เมื่อฉันคลิกปุ่มเอฟเฟกต์แรกจะเริ่มทำงานทำให้ b เปลี่ยนไปทำให้เอฟเฟกต์ที่สองเริ่มทำงานก่อนการเรนเดอร์ถัดไป มีข้อเสียด้านประสิทธิภาพในการจัดโครงสร้างโค้ดเช่นนี้หรือไม่? let MyComponent = props => { let [a, setA] = useState(1) let [b, setB] = useState(2) useEffect( () => { if (/*some stuff is true*/) { setB(3) } }, [a], ) useEffect( () => …

124 javascript  reactjs  react-hooks 

ฉันกำลังลอง React hooks เป็นครั้งแรกและทุกอย่างดูเหมือนจะดีจนกระทั่งฉันรู้ว่าเมื่อฉันได้รับข้อมูลและอัปเดตตัวแปรสถานะที่แตกต่างกันสองตัว (ข้อมูลและแฟล็กการโหลด) ส่วนประกอบของฉัน (ตารางข้อมูล) จะแสดงผลสองครั้งแม้ว่าทั้งสองสาย ไปยังตัวอัปเดตสถานะกำลังเกิดขึ้นในฟังก์ชันเดียวกัน นี่คือฟังก์ชัน api ของฉันซึ่งส่งคืนตัวแปรทั้งสองไปยังส่วนประกอบของฉัน const getData = url => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(async () => { const test = await api.get('/people') if(test.ok){ setLoading(false); setData(test.data.results); } }, []); return { data, loading }; }; ในคอมโพเนนต์คลาสปกติคุณจะโทรเพียงครั้งเดียวเพื่ออัปเดตสถานะซึ่งอาจเป็นอ็อบเจ็กต์ที่ซับซ้อน …

122 javascript  reactjs  react-hooks 

ฉันกำลังทดลองใช้React Hooksใหม่และมีส่วนประกอบนาฬิกาพร้อมตัวนับซึ่งควรจะเพิ่มขึ้นทุกวินาที อย่างไรก็ตามมูลค่าไม่ได้เพิ่มขึ้นเกินหนึ่ง function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(time + 1); }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div> เรียกใช้ข้อมูลโค้ดHide resultsขยายข้อมูลโค้ด

120 javascript  reactjs  react-hooks 

ฉันมีผลข้างเคียงที่จะนำไปใช้และต้องการทราบวิธีจัดระเบียบ: เป็นการใช้งานครั้งเดียว หรือใช้หลายอย่าง อะไรที่ดีกว่าในแง่ของประสิทธิภาพและสถาปัตยกรรม?

118 reactjs  react-hooks 

พิจารณาตัวอย่างตะขอด้านล่าง import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } โดยทั่วไปเราใช้เมธอด this.forceUpdate () เพื่อบังคับให้คอมโพเนนต์แสดงผลซ้ำทันทีในคอมโพเนนต์คลาส React ดังตัวอย่างด้านล่าง class Test extends Component{ constructor(props){ super(props); this.state = { count:0, …

116 javascript  reactjs  react-native  react-hooks 

ฉันเล่นกับระบบ hook ใหม่ใน React 16.7-alpha และติดอยู่ในวงวนที่ไม่มีที่สิ้นสุดใน useEffect เมื่อสถานะที่ฉันจัดการคือวัตถุหรืออาร์เรย์ ขั้นแรกฉันใช้ useState และเริ่มต้นด้วยวัตถุว่างเช่นนี้: const [obj, setObj] = useState({}); จากนั้นใน useEffect ฉันใช้ setObj เพื่อตั้งค่าเป็นวัตถุว่างอีกครั้ง ในฐานะอาร์กิวเมนต์ที่สองฉันกำลังส่ง [obj] โดยหวังว่าจะไม่อัปเดตหากเนื้อหาของวัตถุไม่เปลี่ยนแปลง แต่จะอัปเดตอยู่เสมอ ฉันเดาว่าเพราะไม่ว่าเนื้อหาจะเป็นอย่างไรสิ่งเหล่านี้เป็นวัตถุที่แตกต่างกันเสมอทำให้ React คิดว่ามันเปลี่ยนไปเรื่อย ๆ ? useEffect(() => { setIngredients({}); }, [ingredients]); เช่นเดียวกับอาร์เรย์ แต่เป็นแบบดั้งเดิมมันจะไม่ติดอยู่ในลูปอย่างที่คาดไว้ เมื่อใช้ hooks ใหม่เหล่านี้ฉันจะจัดการกับวัตถุและอาร์เรย์ได้อย่างไรเมื่อตรวจสอบสภาพอากาศว่าเนื้อหามีการเปลี่ยนแปลงหรือไม่

115 reactjs  react-hooks