1. 程式人生 > 其它 >React 函式元件坑

React 函式元件坑

技術標籤:reactjs

記錄一下用React函式元件編寫時遇到的坑

在函式元件中通常會引入useState 和 useEffect

import React , { useState, useEffect } from 'react';
function component(props) {
	const [myNumber, SetMyNumber] = useState(1);
	const obj = {
		num: 1,
		name: cool
	}

	const myFun = () => {
		obj['age'] = 18;
		console.log('obj', obj); 
		otherFun();
	}

	const otherFun = () => {
		console.log('newObj', obj);
	}
}

在函式元件中通常會使用 useState 來定義變數
但是不使用useState也可以定義一個變數

當我在一個函式元件內的方法(myFun)中對obj這個變數進行修改,且打印出來的時候發現是修改成功的。即方法(myFun)中的console.log('obj', obj);
在myFun方法中呼叫了otherFun方法後,otherFun方法中對obj進行了列印,發現剛才在myFun中對obj進行的修改竟然不存在!打印出來的就是定義時的模樣。