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

ด้วยเหตุผลบางอย่างฉันไม่สามารถรับdatepicker ของui วัสดุให้ทำงานได้ ทุกครั้งที่ datepicker แสดงผลใน React ข้อผิดพลาดต่อไปนี้จะถูกส่งออกไป: RangeError: สตริงรูปแบบมีอักขระตัวอักษรละตินที่ไม่ใช้ Escape n ฉันได้สร้าง stackblitz ด้วยเพียง datepicker ( https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js ) และยังมีข้อผิดพลาดปรากฏขึ้น ผมทำอะไรผิดหรือเปล่า? ฉันคิดว่าฉันทำตามคำแนะนำทั้งหมดจากคู่มือการติดตั้ง เชื่อมโยงไปยัง material-ui / pickers: https://material-ui-pickers.dev/

19 javascript  reactjs  material-ui  material-ui-pickers 

ฉันใหม่โดยใช้ React ดังนั้นนี่อาจเป็นเรื่องง่ายที่จะประสบความสำเร็จ แต่ฉันไม่สามารถหาคำตอบได้ด้วยตัวเองแม้ว่าฉันจะทำวิจัยแล้วก็ตาม ยกโทษให้ฉันถ้านี่มันโง่เกินไป บริบท ฉันใช้Inertia.jsกับอะแดปเตอร์ Laravel (แบ็กเอนด์) และ React (front-end) หากคุณไม่รู้จักความเฉื่อยมันเป็นเรื่องปกติ: Inertia.js ให้คุณสร้างแอป React, Vue และ Svelte แบบหน้าเดียวที่ทันสมัยได้อย่างรวดเร็วโดยใช้การกำหนดเส้นทางและตัวควบคุมฝั่งเซิร์ฟเวอร์แบบคลาสสิก ปัญหา ฉันกำลังทำหน้าเข้าสู่ระบบแบบง่ายที่มีแบบฟอร์มที่เมื่อส่งจะทำการร้องขอ POST เพื่อโหลดหน้าถัดไป ดูเหมือนว่าจะทำงานได้ดี แต่ในหน้าอื่น ๆ คอนโซลจะแสดงคำเตือนต่อไปนี้: คำเตือน: ไม่สามารถทำการอัพเดทสถานะทำปฏิกิริยากับส่วนประกอบที่ไม่ได้ประกอบเข้าไป นี่คือไม่ใช้งาน แต่ระบุว่ามีหน่วยความจำรั่วในแอปพลิเคชันของคุณ ในการแก้ไขให้ยกเลิกการสมัครสมาชิกและงานอะซิงโครนัสทั้งหมดในฟังก์ชัน useEffect cleanup ในการเข้าสู่ระบบ (สร้างโดย Inertia) รหัสที่เกี่ยวข้อง (ฉันได้ง่ายขึ้นเพื่อหลีกเลี่ยงบรรทัดที่ไม่เกี่ยวข้อง): import React, { useEffect, useState } from 'react' import Layout …

19 javascript  reactjs  promise  inertia 

ฉันกำลังใช้เบ็ดประวัติศาสตร์ใหม่ของ 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 Material-UI ( https://material-ui.com/components/autocomplete/ ) ในรหัสตัวอย่าง <Autocomplete options={top100Films} getOptionLabel={(option: FilmOptionType) => option.title} style={{ width: 300 }} renderInput={params => ( <TextField {...params} label="Combo box" variant="outlined" fullWidth /> )} /> ฉันทำงานได้ดี แต่ฉันไม่แน่ใจว่าฉันควรได้รับค่าที่เลือกไว้อย่างไร ตัวอย่างเช่นฉันต้องการใช้onChangeเสาเพื่อทำสิ่งนี้เพื่อให้ฉันสามารถดำเนินการบางอย่างตามการเลือก ฉันพยายามเพิ่ม onChange={v => console.log(v)} แต่vจะไม่แสดงสิ่งใดที่เกี่ยวข้องกับค่าที่เลือก

17 javascript  reactjs  material-ui 

ฉันใช้ UseHistory hook ใน router router v5.1.2 กับ typescript หรือไม่ เมื่อเรียกใช้การทดสอบหน่วยฉันพบปัญหา TypeError: ไม่สามารถอ่าน 'ประวัติ' ของคุณสมบัติที่ไม่ได้กำหนด import { mount } from 'enzyme'; import React from 'react'; import {Action} from 'history'; import * as router from 'react-router'; import { QuestionContainer } from './QuestionsContainer'; describe('My questions container', () => { beforeEach(() => { …

17 reactjs  typescript  react-router  jestjs  enzyme 

ฉันมีแอป react (แอพ A) สร้างขึ้นเมื่อประมาณ 2 ปีที่แล้วโดยใช้ create-react-app และมันถูกเปิดออก แอปถูกส่งออกเป็นโมดูล commonjs2 และจัดส่งในแพ็คเกจ NPM ที่จะใช้ในโครงการ next.js (แอป B) ทุกอย่างเป็นไปอย่างราบรื่นจนกระทั่งฉันอัปเดตแพ็กเกจบางตัวในแอพ A ซึ่งมีส่วนประกอบทั่วไปที่เราใช้ ข้อผิดพลาดเมื่อนำเข้าแอพ B เป็นหน้าต่างที่ไม่ได้กำหนดอาจเนื่องมาจาก SSR ฉันแก้ไขสิ่งนี้ในการกำหนดค่า webpack ของแอพ A โดยใช้ globalObject: 'this'ของแอปโดยใช้ ตอนนี้เมื่อฉันพยายามนำเข้าแอพ A ในแอพ B ข้อความแสดงข้อผิดพลาดคือ: TypeError: Cannot read property 'webpackJsonp' of undefined ผมถือว่าเป็นสิ่งที่บางแห่งพยายามโทรwindow['webpackJsonp']? ฉันได้ลองเปลี่ยน webpackJsonpFunction แล้ว แต่ตามที่คาดไว้มันจะพยายามหาคุณสมบัติอื่นที่ไม่ได้กำหนด ความช่วยเหลือใด ๆ …

16 reactjs  npm  webpack  next.js 

ผมเคยเขียนปุ่มที่กำหนดเอง ( MyStyledButton) ตามวัสดุ UI Button import React from "react"; import { Button } from "@material-ui/core"; import { makeStyles } from "@material-ui/styles"; const useStyles = makeStyles({ root: { minWidth: 100 } }); function MyStyledButton(props) { const buttonStyle = useStyles(props); const { children, width, ...others } = props; return ( <Button …

16 javascript  css  reactjs  jestjs  enzyme 

ฉันกำลังเขียนโปรเจ็กต์ React ในรหัส VS ฉันพบปัญหานี้ในรหัส VS ในโครงการของฉันโฟลเดอร์นี้แสดงรายการที่ถูกเน้นและฉันรู้ว่าหมายความว่ามีข้อผิดพลาดในไฟล์ของฉัน แต่ในภาพ , ฉันตรวจสอบไฟล์ทั้งหมดแล้ว แต่ไม่พบข้อผิดพลาด ดังนั้นสิ่งนี้ทำให้ฉันรู้สึกสับสน ฉันค้นหาปัญหานี้ใน google และพบปัญหา github ที่คล้ายกัน https://github.com/Microsoft/vscode/issues/54960 หวังว่าใครบางคนสามารถช่วยฉันได้ ขอบคุณ

16 reactjs  visual-studio-code 

เมื่อพยายามเข้าถึงส่วนประกอบเข้าสู่ระบบของแอป MERN ของฉันในเวอร์ชันการผลิตฉันได้รับข้อผิดพลาดประเภทต่อไปนี้ที่แสดงในภาพนี้: แอพของฉัน ( https://github.com/ahaq0/kumon_schedule ) ทำงานได้อย่างสมบูรณ์แบบในพื้นที่และทำงานได้ดีกับโฮสต์บน Heroku เมื่อก่อนวันนี้ ฉันลองย้อนกลับการเปลี่ยนแปลงทั้งหมดในรหัสที่ฉันทำในวันนี้เพื่อประโยชน์ ฉันตรวจสอบ package.json (และ. ล็อค) เพื่อดูว่าฉันเปลี่ยนการพึ่งพา UI ของวัสดุหรือไม่ แต่นั่นก็เหมือนกัน ฉันไม่สามารถดูเหมือนจะคิดออกว่าทำไมมันหยุดการทำงานทั้งหมดในทันทีกับรุ่นเป็นเจ้าภาพที่นี่ รหัสสำหรับสายของข้อผิดพลาดอยู่ด้านล่าง อย่างไรก็ตามฉันไม่ได้เขียนเนื่องจากเป็นส่วนหนึ่งของ UI วัสดุ if (sheetManager.dynamicStyles) { var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({ link: true }, options)); dynamicSheet.update(props).attach(); state.dynamicSheet = dynamicSheet; state.classes = mergeClasses({ baseClasses: sheetManager.staticSheet.classes, newClasses: dynamicSheet.classes }); if (sheetsRegistry) …

15 reactjs  typescript  heroku  material-ui  mern 

ฉันมีแอป react ที่สร้างโดย create-react-app หลังจากรัน npm start (สคริปต์เริ่มต้นมีอยู่ใน package.json เป็น "start": "react-สคริปต์ start") คอนโซลบอกว่าการเริ่มต้นเซิร์ฟเวอร์การพัฒนาตามปกติและเริ่มเบราว์เซอร์ แต่หลังจากนี้ทั้งคอนโซลและเบราว์เซอร์ไม่ทำอะไรเลยอย่างไม่มีกำหนด ไม่มีข้อผิดพลาดหรือเอาท์พุท มันไม่ทำอะไรเลย

15 reactjs  npm  create-react-app  react-scripts 

ฉันเพิ่งเริ่มใช้ TypeScript กับ Expo ฉันได้ทำการผสานรวมของ linter / formatter ทั้งหมดแล้วtypescript-eslintดังนั้นฉันจึงสามารถตรวจจับข้อผิดพลาดส่วนใหญ่ระหว่างการเขียนโค้ดได้ เพื่อตรวจสอบว่ารหัสรวบรวมฉันเรียกใช้npx tscทุกครั้งและแก้ไขตาม สิ่งหนึ่งที่ฉันยังไม่เข้าใจก็คือสาเหตุที่แอปของฉันสร้างสำเร็จแม้ในขณะที่มีข้อผิดพลาดในการรวบรวมจำนวนมาก ฉันคาดหวัง (และชอบ) เพื่อดูข้อผิดพลาดหน้าจอสีแดงสำหรับทุกข้อผิดพลาดในการรวบรวมมากกว่าการสร้างแอปสำเร็จและฉันพบมันในภายหลัง ตัวอย่างเช่น, function square<T>(x: T): T { console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'. return x * x; } เป็นข้อผิดพลาด TypeScript ทั่วไปที่ (ฉันเชื่อ?) สามารถตรวจสอบได้อย่างง่ายดายในเวลารวบรวม ฉันต้องการให้มันเกิดข้อผิดพลาดของหน้าจอสีแดงขนาดใหญ่และการสร้างล้มเหลว ฉันค่อนข้างใหม่กับ TypeScript ดังนั้นจึงเป็นไปได้ว่าฉันขาดอะไรที่สำคัญมากไป อะไรเป็นสาเหตุของความผ่อนปรนนี้และมีวิธีบังคับใช้เช็คที่เข้มงวดกว่านี้หรือไม่?

15 reactjs  typescript  react-native  expo 

ฉันใหม่ในNext.jsและฉันสงสัยว่าจะเปลี่ยนเส้นทางจากหน้าเริ่มต้น ( / ) ไปยัง/ hello-nextjsได้อย่างไร เมื่อผู้ใช้โหลดหน้าและหลังจากนั้นกำหนดว่าเส้นทาง === / redirect ไปยัง/ hello-nextjs ในการตอบสนองเราเตอร์เราทำสิ่งที่ชอบ: <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} /> </Switch>

15 html  reactjs  routing  react-router  next.js 

ฉันกำลังพยายามโหลดมุมมองรายละเอียดตามเส้นทาง react-router-dom ที่ควรคว้าพารามิเตอร์ URL (id) และใช้เพื่อเติมองค์ประกอบเพิ่มเติม เส้นทางของฉันดูเหมือน/task/:idและส่วนประกอบของฉันโหลดได้ดีจนกระทั่งฉันพยายามคว้า: id จาก URL ดังนี้: import React from "react"; import { useParams } from "react-router-dom"; class TaskDetail extends React.Component { componentDidMount() { let { id } = useParams(); this.fetchData(id); } fetchData = id => { // ... }; render() { return <div>Yo</div>; } } …

14 reactjs  react-router 

ฉันเห็นว่า React.forwardRef น่าจะเป็นวิธีที่ถูกทำนองคลองธรรมในการผ่านการอ้างอิงไปยังองค์ประกอบการทำงานของเด็กจากเอกสารตอบสนอง: const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <FancyButton ref={ref}>Click me!</FancyButton>; อย่างไรก็ตามข้อดีของการทำเช่นนี้คือเพียงแค่ผ่านเสาที่กำหนดเอง: const FancyButton = ({ innerRef }) => ( <button ref={innerRef} className="FancyButton"> {props.children} </button> )); …

13 javascript  reactjs  performance 

ฉันพยายามที่จะสร้างโครงการใหม่โดยใช้create-react-appโดยใช้คำสั่งที่กำหนดในเอกสารเช่นnpx create-react-app my-appแต่มันไม่ได้มีโฟลเดอร์เช่นและpublic srcscript

13 reactjs  create-react-app