遇到什么寫(xiě)什么悯周。
由于最近在使用ant-design悍赢，所以這里還會(huì)涉及與它相關(guān)的問(wèn)題。
1.
日志信息：React does not recognize the `fieldType` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fieldtype` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
問(wèn)題來(lái)源：react
原因：DOM節(jié)點(diǎn)中被傳入了組件屬性
const resPorps={
fieldType:'.txt',
marginLeft:10,
};
return(
<div {...resProps}>
test
</div>
)
如上转晰，fieldType不屬于DOM的默認(rèn)屬性郭怪，對(duì)于React來(lái)說(shuō)，這是一種冗余的寫(xiě)法广辰。
解決辦法：將不屬于DOM的屬性提取出來(lái)
const resPorps={
marginLeft:10,
};
return(
<div {...resProps} fieldType='.txt'>
test
</div>
)
2.
日志信息：Each child in an array or iterator should have a unique "key" prop.與Encountered two children with the same key
問(wèn)題來(lái)源：react,ant-design
原因：第一個(gè)警告是由于數(shù)組循環(huán)時(shí)缺少u(mài)nique "key" prop,即一個(gè)不會(huì)重復(fù)的關(guān)鍵參數(shù)key暇矫。如果出現(xiàn)了重復(fù)，則會(huì)引起第二個(gè)警告择吊，并且在對(duì)數(shù)據(jù)進(jìn)行操作時(shí)李根，如增刪查改，會(huì)出現(xiàn)錯(cuò)誤（特別是在使用Ant-design的table組件時(shí)）几睛。
解決辦法：為數(shù)組添加唯一的key值房轿。
拓展：react為什么要設(shè)置唯一的key值？(React中key的必要性與使用)
在了解這個(gè)問(wèn)題前，我們需要知道react的工作機(jī)制冀续。
React框架的核心思想是琼讽，將頁(yè)面分割成一個(gè)個(gè)組件，一個(gè)組件還可能嵌套更小的組件洪唐，每個(gè)組件都有自己的數(shù)據(jù)（屬性/狀態(tài)）钻蹬，并且只關(guān)心自己部分的邏輯，彼此獨(dú)立;當(dāng)某個(gè)組件的數(shù)據(jù)發(fā)生變化時(shí)凭需，新的數(shù)據(jù)自該組件頂層向下流向子組件问欠，每個(gè)組件調(diào)用自己的render方法得到新的視圖，并與之前的視圖作diff-比較差異粒蜈，完成視圖更新（reconciliation-調(diào)和）顺献。
基于Reac開(kāi)發(fā)的所有DOM都是通過(guò)virtual dom來(lái)實(shí)現(xiàn)的。當(dāng)數(shù)據(jù)更新時(shí)枯怖，react利用純js根據(jù)組件們的render方法計(jì)算出新的虛擬dom樹(shù)注整，并與此前的虛擬dom樹(shù)作diff，得到一個(gè)patch（差異補(bǔ)抖认酢）肿轨，最后將patch映射到真實(shí)dom樹(shù)上完成視圖更新。
由于React采用的diff算法是對(duì)新舊虛擬dom樹(shù)同層級(jí)的元素挨個(gè)比較蕊程，就會(huì)發(fā)現(xiàn)當(dāng)react遇到循環(huán)輸出元素時(shí)椒袍，就會(huì)出現(xiàn)一些問(wèn)題，比如表格藻茂、列表等驹暑。
以列表為例：
//舊
<ul>
<li>first</li>
<li>second</li>
</ul>
//新
<ul>
<li>zero</li>
<li>first</li>
<li>second</li>
</ul>
可以看出，上面的操作是在first前插入一條新的數(shù)據(jù)zero辨赐，原有的數(shù)據(jù)向后移一位优俘。但是對(duì)于react來(lái)說(shuō)，新的DOM樹(shù)與舊的DOM樹(shù)是完全不同的掀序，原來(lái)的兩個(gè)li元素都與新v-dom中對(duì)應(yīng)位置上的兩個(gè)li元素不同兼吓，它會(huì)對(duì)整個(gè)ul列表進(jìn)行更新，即將舊的<li>first</li>變?yōu)?code><li>zero</li>森枪，舊的<li>second</li>變?yōu)?code><li>first</li>， 最后新增一個(gè)<li>second</li>節(jié)點(diǎn)审孽，這增加了額外的修改操作县袱。
解決這個(gè)問(wèn)題的方法是使用一個(gè)唯一的key值，用來(lái)唯一標(biāo)識(shí)同父同層級(jí)的兄弟元素佑力。當(dāng)React作diff時(shí)式散，只要子元素有key屬性打颤，便會(huì)去原v-dom樹(shù)中相應(yīng)位置（當(dāng)前橫向比較的層級(jí)）尋找是否有同key元素暴拄，比較它們是否完全相同漓滔，若是則復(fù)用該元素，免去不必要的操作乖篷。
3.
日志信息：You cannot set a form field before rendering a field associated with the value.
問(wèn)題來(lái)源：ant-design
原因：在給form表單賦值時(shí)响驴，form表單還未注冊(cè)。
解決方法：還未解決撕蔼。
4.
日志信息：Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
問(wèn)題來(lái)源：react
原因：跳轉(zhuǎn)路由時(shí)豁鲤，當(dāng)前組件被銷(xiāo)毀，但是組件內(nèi)部還存在異步操作對(duì)state的狀態(tài)信息 比如http請(qǐng)求,定時(shí)器setTimeOut更新state等鲸沮。
解決方法：(React 警告和異常整理)
解決方案一：組件被銷(xiāo)毀之前重寫(xiě)setState方法 不對(duì)狀態(tài)做任何改變
componentWillUnmount(){
this.setState = (state,callback)=>{
return;
};
}
解決方案二：組件被銷(xiāo)毀之前 可以setState 銷(xiāo)毀之后就不能setState
componentWillMount() {
this._isMounted = true
fetch('網(wǎng)絡(luò)請(qǐng)求').then (status, response)=>{
if (this._isMounted) {
this.setState({
activityTipsImg: response.data.tips_url,
activityTipsContent: response.data.tips_content
})
}
});
}
componentWillUnmount() {
this._isMounted = false
}
5.
日志信息：Style prop value must be an object react/style-prop-object
問(wèn)題來(lái)源：react
原因：在React框架的JSX編碼格式要求琳骡，style必須是一個(gè)對(duì)象。
解決方法：除了外部那個(gè)表示Javascript語(yǔ)句的花括號(hào)外讼溺，里面必須再寫(xiě)一個(gè)花括號(hào){}包含的對(duì)象楣号，例如<div style={ { color:“blue” } }></div>，外部的{ }表示這是Javascript句法怒坯，里面的{ }表示這是一個(gè)對(duì)象炫狱。
6.
日志信息：validateDOMNesting(...): <tr> cannot appear as a child of <table>
問(wèn)題來(lái)源：react
原因：在React中<tr>元素不可以作為<table>元素的直接子元素。
解決方法：在<tr>元素tbody和<table>元素中間插入<tbody>元素敬肚，如：
<table>
<tbody>
<tr>
<td></td>
</tr>
<tbody>
</table>
7.
日志信息：Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
問(wèn)題來(lái)源：react
原因：<input />設(shè)置了value的話毕荐，輸入框的值將一直展示為value的值，是不可改變的艳馒，要想改變的話憎亚，需要通過(guò)onChange。
解決方法：要是該輸入框的值不需要修改弄慰，這可以將input的屬性設(shè)置為readOnly第美，否則的話應(yīng)該使用defaultValue來(lái)設(shè)置輸入框的初始值。
