클래스 구성 요소를 사용하여 외부 파일에서 값을 가져 오는 방법은 무엇입니까?
Berg_Durden
이 파일을 통해 locaStorage에서 값을 얻습니다.
const cartDataFn = () => {
let cartData = []
const cartDataStorage = JSON.parse(localStorage.getItem('cartList'))
if (cartDataStorage !== null) {
cartData = cartDataStorage
}
return cartData
}
export default cartDataFn
산출:
보시다시피 배열 ( cartData) 을 반환하는 함수입니다.
함수 구성 요소로 가져 오면 배열을 가져올 수 있습니다. 이렇게 :
import React, { Fragment } from 'react'
import cartData from '../../../Data/cartData';
const Products = props => {
let [cartState, setCart] = React.useState(cartData)
console.log(cartState) // => It prints the array cartData
}
export default Products
그러나 클래스 구성 요소로 동일한 작업을 수행하려고 할 때 cartData. 파일을 콘솔에 로그인하면 함수가 시각적으로 표시됩니다.
import React, { Component } from 'react'
import cartData from '../../Data/cartData'
class Layout extends Component {
state = {
cartState: cartData,
}
componentDidMount(){
console.log(this.state.cartState) // => It wont give me 'cartData', rather I'll get a visual draw of the whole function
}
render () {
return (
<div>
<p>Anything</p>
</div>
)
}
}
export default Layout
산출:
클래스 구성 요소에서 이러한 값에 어떻게 액세스 할 수 있습니까?
확실한 성능
cartDataFn함수 이므로 클래스 구성 요소에서 호출 해야합니다 .
class Layout extends Component {
state = {
cartState: cartData(),
}
(가급적이면 데이터가 아니라 함수임을 나타내는 더 정확한 이름을 지정하십시오)
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
클래스 생성자를 사용하여 파일에서 값을 가져 오는 방법은 무엇입니까? C ++
- 2
TypeScript를 사용하여 재사용 가능한 구성 요소에서 HTML 스타일 속성을 가져 오는 방법은 무엇입니까?
- 3
반응에서 후크를 사용하여 자식 구성 요소에서 값을 가져 오는 부모 구성 요소에서 올바른 상태 값을 업데이트하는 방법은 무엇입니까?
- 4
탐색이 외부 파일에있을 때 jQuery를 사용하여 탐색에 클래스를 추가하는 방법은 무엇입니까?
- 5
스타일 또는 클래스 이름을 추가하고 웹 구성 요소에서 다른 요소를 제거하는 방법은 무엇입니까?
- 6
호스트 외부에서 하위 구성 요소 목록을 구성하는 방법은 무엇입니까?
- 7
자식 기능 구성 요소에서 부모 클래스 구성 요소로 값을 전달하는 방법은 무엇입니까?
- 8
Objective C 클래스 외부에서 개인 인스턴스 변수 / 속성을 가져오고 설정하는 방법은 무엇입니까?
- 9
레일을 사용하여 구분자에 클래스를 추가하는 방법은 무엇입니까?
- 10
node-java 모듈을 사용하여 .js 파일 내에서 자체 Java 클래스를 가져 오는 방법은 무엇입니까?
- 11
입력 텍스트의 값을 가져와 자식에서 부모 구성 요소로 전달하는 방법은 무엇입니까?
- 12
InteliJ에서 복사하여 붙여 넣을 때 클래스를 가져 오는 방법은 무엇입니까?
- 13
클래스 외부에서 속성을 추가하는 방법은 무엇입니까?
- 14
jQuery를 사용하여 동일한 요소의 클래스 값에 제목의 값을 추가하는 방법은 무엇입니까?
- 15
양식 구성 요소를 사용하여 외부 URL에 제출하는 방법은 무엇입니까?
- 16
jsoup을 사용하여 요소의 일부가 아닌 텍스트를 얻는 방법은 무엇입니까?
- 17
jsoup을 사용하여 요소의 일부가 아닌 텍스트를 얻는 방법은 무엇입니까?
- 18
주석을 사용하여 클래스의 속성 값에서 xml 요소 이름을 파생하는 방법은 무엇입니까?
- 19
구성 요소의 루트에 CSS 클래스를 추가하는 방법은 무엇입니까?
- 20
Terraform을 사용하여 ACR에서 이미지를 가져 오도록 Azure 앱 서비스를 구성하는 방법은 무엇입니까?
- 21
jquery를 사용하여 요소 속성의 "name [ID] [OTHER]"에서 "ID"값을 가져 오는 방법은 무엇입니까?
- 22
Visual Studio 2019에서 Blazor의 구성 요소에 부분 클래스를 추가하는 방법은 무엇입니까?
- 23
사용자 정의 속성을 사용하는 HTML 요소에서 텍스트를 가져 오는 방법은 무엇입니까?
- 24
angular7에서 모달 구성 요소 외부를 클릭하여 ngx-simple-modal을 숨기는 방법은 무엇입니까?
- 25
하나의 일반 폴더에서 여러 구성 요소를 가져 오는 방법은 무엇입니까?
- 26
rsocket을 사용하여 스프링 부트에서 SSL / TLS를 구성하는 방법은 무엇입니까?
- 27
클래스를 사용하여 에코 내부의 요소에 스타일 효과를 추가하는 방법은 무엇입니까?
- 28
클래스 구성 요소에서 전달 참조를 사용하는 방법은 무엇입니까?
- 29
jquery를 사용하여 요소에 조건부 클래스가있는 요소를 만드는 방법은 무엇입니까?
몇 마디 만하겠습니다