반응형

react-hooks 27

별도의 구성 요소에 가져오기 기능 삽입

별도의 구성 요소에 가져오기 기능 삽입 다음 구성 요소에서 petchImages 기능을 꺼내 새 구성 요소 안에 넣으려고 한다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; import UnsplashImage from './UnsplashImage'; const Collage = () => { const [images, setImages] = useState([]); const [loaded, setIsLoaded] = useState(false); const fetchImages = (count = 10) => { const apiRoot = 'https://api.unsplash.com'; const a..

programing 2022.03.31

React useEffect에 종속성 배열의 스프레드 요소가 있음

React useEffect에 종속성 배열의 스프레드 요소가 있음 비동기 호출의 로딩 및 오류 동작을 처리할 사용자 지정 후크를 만들려고 한다. 나는 그것을 그렇게 사용하고 싶다. const { loading, error} = useFetch(fetchUser, id) 또는 const {loading, error } = useFetch(updateUserName, id, name) 나는 지금까지 이렇게 생긴 것을 가지고 있다. function useFetch(fetchFn, ...params) { const [loading, setLoading] = useState(true); const [error, setError] = useState(false); useEffect(() => { fetchFn(....

programing 2022.03.28

useRedcer 및 useContext를 사용하여 사용자 정의 후크에서 작업을 디스패치하는 방법

useRedcer 및 useContext를 사용하여 사용자 정의 후크에서 작업을 디스패치하는 방법 버튼 토글을 위해 샘플을 만들었다. 이 일은 에 의해 이루어진다.useContext(데이터 저장) 및useReducer(데이터를 처리한다.잘 되고 있어. CodeSandBox 링크는 어떻게 작동하는지 입니다. version 1버튼을 클릭할 때 바로 전송하는 것이다. 그리고 나서 나는 a를 만들었다.version 2토글링에 대한 거야 그냥 주문제작 후크에 넣어두기만 하면 돼 근데 어떻게 된 거야? // context export const initialState = { status: false } export const AppContext = createContext({ state: initialState, ..

programing 2022.03.28

useState가 계속 초기값으로 재설정됨재렌더 시

useState가 계속 초기값으로 재설정됨재렌더 시 그래서 화면 코드는 이렇게 생겼어.나는 UseState를 가지고 있다.amount리렌더에서 초기값으로 계속 재설정되는 경우.useEffects가 3개 정도 있어.그 중 하나는 여기 샘플 코드에 있는데, 나는 db에서 금액을 받고 setAmount를 사용하여 설정한다. const ConfirmPaymentDialog = props => { const getInitialVal = () => { console.log('Initial Amount: 0'); return conversions.numberToBigNumber(0); }; const [amount, setAmount] = useState(getInitialVal()); useEffect(() => ..

programing 2022.03.28

React Class Component에서 Mobx Store의 값을 사용하시겠습니까?

React Class Component에서 Mobx Store의 값을 사용하시겠습니까? React Class 구성 요소의 후크에 액세스하고 싶다. 콘바.tsx import * as React from "react"; import { Stage, Layer } from "react-konva"; import { useFrameItStore } from "../store/index"; import { BrowserWindow, SiteImage, TrafficSignal, URLBar } from "./index"; import { Window } from "../types/index"; import { Stage as StageType } from "konva/types/Stage"; export clas..

programing 2022.03.26

react Native에서 setNativePropes에 대한 useRef 후크를 사용하는 방법?

react Native에서 setNativePropes에 대한 useRef 후크를 사용하는 방법? React Native의 클래스 구성요소를 관련된 기능 구성요소로 변환하려고 함useRef. 클래스 구성 요소는 다음과 같다. import React, { Component } from "react"; import { AppRegistry, StyleSheet, Text, View, Animated, TouchableWithoutFeedback } from "react-native"; import { interpolateNumber, interpolateRgb } from "d3-interpolate"; export default class animations extends Component { state ..

programing 2022.03.26

반응 useState는 여기서 기본값을 허용하지 않는 것 같으십니까?

반응 useState는 여기서 기본값을 허용하지 않는 것 같으십니까? 특정 선을 표시하거나 숨길 수 있는 차트 구성요소가 있다.활성 상태인 라인을 추적하려면activeKeys차곡차곡 차다처음에는 함수에서 키 이름을 얻음getKeys데이터의 배열을 필요로 한다. 이 작업을 수행할 때: const defaultValue = getKeys(data) console.log('defaultValue from keys', defaultValue) const [activeKeys, setActiveKeys] = useState(defaultValue) console.log('activeKeys', activeKeys) 첫 번째 콘솔 로그에 올바른 키가 표시됨: ["createdCount", "confirmedCoun..

programing 2022.03.25

후크로 렌더 두 번 반응

후크로 렌더 두 번 반응 내 구성 요소가 두 번 렌더링되는 이유 export default function App() { console.log("asd"); const [count, setCount] = useState(0); return ( { setCount(count + 1); }} /> ); } //console= "asd" "asd" 두 번 렌더링되지만 useState를 제거하면 발생하지 않음당신의 앱은 리액션에 의해 포장될 수 있다.엄격한 모드.StrategyMode는 응용프로그램의 잠재적인 문제를 강조하기 위한 도구다. StrategyMode는 현재 다음을 지원하고 있다. 안전하지 않은 라이프사이클로 구성 요소 식별 레거시 문자열 참조 API 사용에 대한 경고 사용되지 않는 findDOMNo..

programing 2022.03.21

리액션 후크에서 구성 요소는 설정 상태를 호출하지 않아도 작동함

리액션 후크에서 구성 요소는 설정 상태를 호출하지 않아도 작동함 내 리액션 후크 코드야 function State(){ var [msg,set_msg]=React.useState("hello") //not rendered, just to force render var [data,set_data]=React.useState({version:1}) function onClick(){ set_msg(x=>x+'x') //just to force render data.version+=1 //changing state in place, but it still updates } return version={data.version} click } ReactDOM.render(,document.querySelector..

programing 2022.03.20

ReactMarkDown 내에서 JSX 렌더링

ReactMarkDown 내에서 JSX 렌더링 ReactMarkDown 내에서 JSX를 렌더링하는 방법?내 JSX 요소를 안으로 감싸고 싶다.ReactMarkDown구성 요소를 갖추고 이와 같은 것을 성취할 수 있다. {Some text} {Some text} 이것을 사용하기보다 가능한 최선의 접근방법은 무엇인가?각 JSX 요소 내에서 여러 번이요?사용자 지정 구성 요소를 생성하십시오. 이 구성 요소 예제에서는 자식 노드를 매핑하고 각 아이를ReactMarkDown. https://reactjs.org/docs/react-api.html#reactchildrenmap const MarkdownPlus = ({ children }) => ( React.Children.map(children, child =..

programing 2022.03.19
반응형