คำถามติดแท็ก reactjs

ฉันพยายามที่จะเข้าใจuseEffectเบ็ดในเชิงลึก ฉันต้องการทราบว่าจะใช้วิธีใดเมื่อใดและเพราะเหตุใด 1.useEffect with no second paraments useEffect(()=>{}) 2.useEffect with second paraments as [] useEffect(()=>{},[]) 3.useEffect with some arguments passed in the second parameter useEffect(()=>{},[arg])

10 javascript  reactjs  react-redux 

ฉันมีกรณีเมื่อฉันต้องรู้ว่าผู้ใช้เข้าสู่ระบบหรือไม่ก่อนที่จะได้รับการแสดงผลด้านเซิร์ฟเวอร์และส่งกลับมาให้ฉันโดยใช้ Next.js เพื่อหลีกเลี่ยงการเปลี่ยนแปลงวูบวาบใน UI ฉันสามารถหาวิธีป้องกันไม่ให้ผู้ใช้เข้าถึงบางหน้าได้ถ้าเขาเข้าสู่ระบบแล้วโดยใช้ส่วนประกอบ HOC นี้ ... export const noAuthenticatedAllowed = (WrappedComponent: NextPage) => { const Wrapper = (props: any) => { return <WrappedComponent {...props} />; }; Wrapper.getInitialProps = async (ctx: NextPageContext) => { let context = {}; const { AppToken } = nextCookie(ctx); if (AppToken) { const decodedToken: …

10 javascript  reactjs  typescript  next.js 

ฉันกำลังพยายามเลียนแบบแอพแชทมือถืออื่น ๆ ซึ่งเมื่อคุณเลือกsend-messageกล่องข้อความและมันเปิดแป้นพิมพ์เสมือนจริงข้อความล่างสุดยังคงอยู่ในมุมมอง ดูเหมือนจะไม่มีทางทำสิ่งนี้กับ CSS อย่างน่าอัศจรรย์ดังนั้น JavaScript resize(วิธีเดียวที่จะค้นหาว่าเมื่อใดที่แป้นพิมพ์ถูกเปิดและปิดอย่างเห็นได้ชัด) เหตุการณ์และการเลื่อนด้วยตนเองเพื่อช่วยเหลือ มีคนให้โซลูชันนี้และฉันพบวิธีแก้ปัญหานี้ซึ่งทั้งคู่ดูเหมือนจะใช้งานได้ ยกเว้นในกรณีเดียว สำหรับบางเหตุผลถ้าคุณอยู่ในMOBILE_KEYBOARD_HEIGHT(250 พิกเซลในกรณีของฉัน) พิกเซลด้านล่างของข้อความ div เมื่อคุณปิดแป้นพิมพ์มือถืออะไรแปลก ๆ เกิดขึ้น ด้วยวิธีการแก้ปัญหาเดิมมันเลื่อนไปที่ด้านล่าง และด้วยวิธีแก้ปัญหาหลังมันจะเลื่อนMOBILE_KEYBOARD_HEIGHTพิกเซลขึ้นจากด้านล่างแทน หากคุณเลื่อนไปที่ความสูงนี้โซลูชันทั้งสองที่ให้ไว้ข้างต้นจะทำงานได้อย่างไม่มีที่ติ เฉพาะเมื่อคุณอยู่ใกล้ด้านล่างสุดที่พวกเขามีปัญหาเล็กน้อยนี้ ฉันคิดว่าบางทีมันเป็นเพียงโปรแกรมของฉันที่ทำให้เกิดสิ่งนี้ด้วยรหัสหลงทางแปลก ๆ แต่ไม่ฉันทำซ้ำซอและมีปัญหาตรงนี้ ฉันขอโทษที่ทำให้สิ่งนี้ยากต่อการแก้ไข แต่ถ้าคุณไปที่https://jsfiddle.net/t596hy8d/6/show (ส่วนต่อท้ายของการแสดงเป็นโหมดเต็มหน้าจอ) บนโทรศัพท์ของคุณคุณควรจะเห็น พฤติกรรมเดียวกัน หากคุณเลื่อนขึ้นมามากพอการเปิดและปิดแป้นพิมพ์จะรักษาตำแหน่งไว้ อย่างไรก็ตามหากคุณปิดแป้นพิมพ์ภายในMOBILE_KEYBOARD_HEIGHTพิกเซลที่ด้านล่างคุณจะพบว่ามันเลื่อนไปที่ด้านล่างแทน อะไรทำให้เกิดสิ่งนี้ การสร้างรหัสที่นี่: window.onload = function(e){ document.querySelector(".messages").scrollTop = 10000; bottomScroller(document.querySelector(".messages")); } function bottomScroller(scroller) { let scrollBottom = scroller.scrollHeight - …

10 javascript  android  html  css  reactjs 

ฉันกำลังสร้างการแสดงผลคอมโพเนนต์จากไลบรารีรูปแบบภายนอก (node_modules) ของฉัน ในแอพหลักของฉันฉันส่งLinkอินสแตนซ์ของฉันจากreact-router-domลงในคอมโพเนนต์ไลบรารีภายนอกของฉันดังนี้: import { Link } from 'react-router-dom'; import { Heading } from 'my-external-library'; const articleWithLinkProps = { url: `/article/${article.slug}`, routerLink: Link, }; <Heading withLinkProps={articleWithLinkProps} /> ในห้องสมุดของฉันมันแสดงผลLinkดังนี้: const RouterLink = withLinkProps.routerLink; <RouterLink to={withLinkProps.url} > {props.children} </RouterLink> RouterLinkดูเหมือนว่าจะทำให้ได้อย่างถูกต้องและแม้กระทั่งนำทางไปยัง URL เมื่อคลิก ปัญหาของฉันคือRouterLinkดูเหมือนว่าจะแยกออกจากreact-router-domอินสแตนซ์ของแอพของฉัน เมื่อฉันคลิกHeadingมัน "ยาก" นำทางโพสต์กลับหน้าแทนที่จะกำหนดเส้นทางที่มีต่อเนื่องตามLinkปกติ ฉันไม่แน่ใจว่าจะลองอะไร ณ จุดนี้เพื่อให้นำทางได้อย่างราบรื่น ขอความช่วยเหลือหรือคำแนะนำใด ๆ …

10 javascript  reactjs  react-router-dom 

ฉันกำลังพยายามหาวิธีรับชื่อผู้ใช้ซึ่งเป็นคุณลักษณะที่เก็บไว้ในคอลเลกชันผู้ใช้ซึ่งถูกรวมเข้ากับคุณลักษณะที่สร้างขึ้นโดยรูปแบบการรับรองความถูกต้องของ firebase ฉันสามารถเข้าถึง authUser - ซึ่งให้ฐานข้อมูล firefield ที่ จำกัด แก่ฉันในเครื่องมือการตรวจสอบความถูกต้องแล้วฉันก็พยายามที่จะได้รับจากที่นั่นไปยังคอลเลกชันผู้ใช้ที่เกี่ยวข้อง (ซึ่งใช้ uid เดียวกัน) ฉันมีผู้บริโภคที่ตอบสนองต่อบริบทด้วย: import React from 'react'; const AuthUserContext = React.createContext(null); export default AuthUserContext; จากนั้นในองค์ประกอบของฉันฉันพยายามที่จะใช้: const Test = () => ( <AuthUserContext.Consumer> {authUser => ( <div> {authUser.email} // I can access the attributes in the authentication collection {authUser.uid.user.name} //i …

10 reactjs  firebase  google-cloud-firestore  firebase-authentication 

ฉันพยายามที่จะแก้ไขปัญหานี้ แต่ไม่พบคำตอบที่ดี ฉันพยายามที่จะดำเนินการกลายพันธุ์เข้าสู่ระบบโดยใช้ตะขอ useMutation TLDR; ฉันต้องการที่จะรู้ว่าอะไรคือความแตกต่างระหว่าง onError ผ่านในตัวเลือกและข้อผิดพลาดให้ฉันโดย useMutation นี่คือข้อมูลโค้ดของฉัน const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, { variables: { email, password }, onError(err) { console.log(err); }, }); ฝั่งเซิร์ฟเวอร์ฉันมีอีเมลที่ตั้งไว้ล่วงหน้า / ฮาร์ดโค้ดที่ใช้ในการเข้าสู่ระบบและฉันไม่ได้ใช้ Apollo หรือไคลเอนต์อื่น ๆ ในตัวแก้ไขการเข้าสู่ระบบการกลายพันธุ์นี้ฉันเพียงแค่โยนข้อผิดพลาดหากอีเมลไม่เหมือนกันโดยใช้ throw new Error('Invalid Email'); ตอนนี้ฉันต้องการจัดการข้อผิดพลาดนี้ที่ฝั่งไคลเอ็นต์ (ตอบสนอง) แต่ข้อกังวลของฉันคือว่าถ้าฉันใช้ 'ข้อผิดพลาด' ส่งคืนจากตะขอ useMutation และพยายามที่จะแสดงข้อผิดพลาดด้วยวิธีนี้ render() { …

10 reactjs  graphql  react-apollo  apollo-client 

Google แสดงป๊อปอัป 3 รายการข้างต้นแก่ผู้ใช้เมื่อพวกเขาพยายามสมัครใช้โดยใช้ google บนเว็บไซต์ของฉัน แต่มันจะไม่แสดงป๊อปอัปเดียวกันกับฉันเมื่อฉันพยายามสมัครใช้งาน สิ่งที่ฉันเห็นก็แค่นี้ - ป๊อปอัปทั้งสามแยกเหล่านี้ก่อให้เกิดการเลื่อนลงอย่างมากจากเว็บไซต์ของฉัน ฉันจะลบป๊อปอัปการอนุญาต 3 รายการเหล่านี้ได้อย่างไร รายละเอียดปุ่มลงชื่อเข้าใช้Google - การใช้การตอบโต้เข้าสู่ระบบ Google <div className="manager-signup-container"> <div className="content">Join Peoplebox as a Manager to have productive 1:1s that drive actions.</div> <GoogleLogin className={`google-btn-${this.state.loginbtnStatus}`} clientId={GOOGLE_CLIENT_ID} buttonText="Sign up with Google" onSuccess={(response) => this.responseOauth(response, "google")} onFailure={this.responseGoogleFail} responseType="code" scope="profile email https://www.googleapis.com/auth/calendar.events https://www.googleapis.com/auth/calendar.readonly" accessType="offline" …

10 reactjs  google-calendar-api  google-signin  google-apps  google-login 

ฉันกำลังพยายามหาวิธีแสดงการประทับเวลา firestore ในแอปที่ตอบสนอง ฉันมีเอกสาร firestore ที่มีฟิลด์ชื่อ createdAt ฉันกำลังพยายามที่จะรวมไว้ในรายการผลลัพธ์ (การแยกบิตที่เกี่ยวข้องที่นี่เพื่อให้คุณไม่ต้องอ่านรายชื่อทั้งหมดของฟิลด์) componentDidMount() { this.setState({ loading: true }); this.unsubscribe = this.props.firebase .users() .onSnapshot(snapshot => { let users = []; snapshot.forEach(doc => users.push({ ...doc.data(), uid: doc.id }), ); this.setState({ users, loading: false, }); }); } componentWillUnmount() { this.unsubscribe(); } render() { const { users, …

10 javascript  reactjs  firebase  google-cloud-firestore  unix-timestamp 

ฉันใช้ Material ui SwipeableViews ที่ใช้แพ็คเกจ ReactSwipableView ฉันได้รับข้อผิดพลาดนี้บนคอนโซล react-dom.development.js: 12466 คำเตือน: componentWillReceiveProps ได้ถูกเปลี่ยนชื่อแล้วและไม่แนะนำให้ใช้ ดูรายละเอียดที่ ย้ายข้อมูลการดึงรหัสหรือผลข้างเคียงไปยัง componentDidUpdate หากคุณกำลังอัปเดตสถานะเมื่อใดก็ตามที่อุปกรณ์ประกอบฉากเปลี่ยนแปลงให้ทำซ้ำรหัสของคุณเพื่อใช้เทคนิคการบันทึกความจำหรือย้ายไปที่ getDerivedStateFromProps คงที่ เรียนรู้เพิ่มเติมได้ที่: เปลี่ยนชื่อ componentWillReceiveProps เป็น UNSAFE_componentWillReceiveProps เพื่อยับยั้งคำเตือนนี้ในโหมดที่ไม่เข้มงวด ใน React 17.x เฉพาะชื่อ UNSAFE_ เท่านั้นที่จะใช้งานได้ ในการเปลี่ยนชื่อวงจรชีวิตที่คัดค้านทั้งหมดไปเป็นชื่อใหม่คุณสามารถเรียกใช้npx react-codemod rename-unsafe-lifecyclesในโฟลเดอร์ซอร์สโครงการของคุณ กรุณาอัพเดทองค์ประกอบต่อไปนี้: ReactSwipableView มีวิธีใดที่จะกำจัดข้อผิดพลาดนี้ฉันลอง UNSAFE_componentWillReceiveProps แต่ไม่มีอะไรเปลี่ยนแปลง

10 reactjs 

ฉันพยายามบีบอัดโค้ดที่เขียนด้วย Next.js โดยใช้ Gzip ส่งมอบกับเซิร์ฟเวอร์ Nginx และ NodeJS ดูเหมือนว่าการกำหนดค่าจะทำงานเมื่อฉันใช้curl -H "Content-Encoding: gzip"ในการตรวจสอบ แต่มาที่เบราว์เซอร์ตัวจริง (Chrome, Firefox) ฉันไม่พบContent-Encoding: gzipคุณสมบัติใน Response Headers แต่X-Content-Encoding-Over-Network: gzipปรากฏว่า ฉันใช้ Google Lighthouse เพื่อทดสอบว่าเป็นเว็บไซต์หรือไม่มันเป็นโทษฉันที่จะเปิดใช้งานการบีบอัดไฟล์ข้อความ จริงๆแล้วความX-Content-Encoding-Over-Networkหมายของอะไร ฉันจะทำให้ gzip ทำงานได้อย่างไร การตั้งค่า Nginx: gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.0; gzip_types text/css text/plain text/javascript …

10 node.js  reactjs  nginx  gzip  next.js 

ฉันกำลังทำเบ็ดแบบกำหนดเองที่มี 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 

ฉันมีองค์ประกอบ React ซึ่งรวมถึงสถานะความพร้อมใช้งานของการเชื่อมต่ออินเทอร์เน็ต องค์ประกอบ UI จะต้องเปลี่ยนแปลงแบบไดนามิกตามสถานะเรียลไทม์ ฟังก์ชั่นจะทำงานแตกต่างกันไปตามการเปลี่ยนแปลงของธง การใช้งานปัจจุบันของฉันสำรวจระยะไกล API โดยใช้ Axios ในทุก ๆ วินาทีโดยใช้ช่วงเวลาและปรับปรุงสถานะให้สอดคล้อง ฉันกำลังมองหาวิธีที่ละเอียดและมีประสิทธิภาพมากขึ้นในการทำงานนี้เพื่อลบข้อผิดพลาด 1 วินาทีของสถานะด้วยต้นทุนการคำนวณขั้นต่ำ ถือว่าออนไลน์ถ้าหากว่าอุปกรณ์นั้นมีการเชื่อมต่ออินเทอร์เน็ตภายนอก การใช้งานในปัจจุบัน: class Container extends Component { constructor(props) { super(props) this.state = { isOnline: false }; this.webAPI = new WebAPI(); //Axios wrapper } componentDidMount() { setInterval(() => { this.webAPI.poll(success => this.setState({ isOnline: success …

10 javascript  reactjs  axios 

วันนี้ฉันเริ่มรับข้อผิดพลาดในการสร้างในโครงการที่สร้างด้วย typescript ในไฟล์ที่ (หรือสิ่งที่อ้างอิง) ไม่มีการเปลี่ยนแปลงในสัปดาห์ฉันเริ่มที่จะได้รับ: ./path/to/my/file.ts Line 0: Parsing error: Cannot read property 'name' of undefined ข้อผิดพลาดนี้ปรากฏขึ้นครั้งแรกใน CI ของเราสามารถทำซ้ำได้โดยการสร้างด้วยตนเองบนเซิร์ฟเวอร์และในที่สุดฉันก็สามารถทำซ้ำในคอมพิวเตอร์ของฉันเอง (ซึ่งทำงานได้อย่างสมบูรณ์) หลังจากอัปเดตแพ็คเกจทั้งหมด ตอนนี้แม้ว่าฉันจะดึงสิ่งก่อสร้าง (สิ่งปลูกสร้าง) เก่าของโครงการของฉันฉันไม่สามารถสร้างมันได้ ฉันได้รับyarn.lockการยอมรับจาก repo ของฉัน แต่แม้จะเก่าpackage.jsonและyarn.lock(ฉันลบnode_modulesและทำyarn) ฉันก็ไม่สามารถสร้างได้ ข้อผิดพลาดนี้เริ่มต้นจากสีน้ำเงินอย่างแท้จริงในวันนี้ อะไรคือเหตุผล? รุ่นของฉัน (อาจเกี่ยวข้อง): yarn 1.22.4, node v13.11.0, typescript 3.7.5 react 16.12 react-scripts 3.4.0 macOS 10.15 Catalina

10 reactjs  typescript  create-react-app  react-scripts  react-typescript 

ฉันมีบริการ API ที่ฉันมีวิธีการที่แตกต่างกันในการโทรไปยัง API ฉันได้ทดสอบคำขอ GET ทั้งหมดเรียบร้อยแล้ว แต่ฉันประสบปัญหาในการทดสอบคำขอ POST นี่คือวิธีการ: export default class ApiService { static makeApiCall = <T>( url: string, oneCb: <T>(d: Data) => T, secondCb: (d: T) => void, errorCb?: (a: ErrorModel) => void, method = 'get', data = {}, ): Promise<void> => { const config: AxiosRequestConfig = …

9 javascript  reactjs  testing  ecmascript-6  jestjs