開發容易忽略的事情(二)

5. props數字做為字串傳遞

如果傳遞props的值後續會被進行嚴格判斷，那就有可能導致程式出現錯誤訊息，如下：

class Aval extends React.Component {
  render() {
    return (
      <h1>
        Test aval {this.props.posnum === 1 ? "first!" : "last!"} .
      </h1>
    );
  }
}

上述例子期望posnum是一個數字，因此若要避免此處出現問題可以這樣寫：

const element = <Aval posnum={1} />

6. 將props作為String，而非Number

這問題也是因為習慣而容易忽略

<MyPropsInfo value="4" />

此處props會被當作字串送到MyPropsInfo。因此確定需要將其作為數字使用時，可以使用parseInt()或插入大括號，而非使用引號來處理

<MyPropsInfo value={4} />

7. 直接修改state的狀態

React中state是不應該被直接改變的，如果直接修改會導致出現性能問題，並且頁面也不會更新。

const modifyPetsList = (element, index) => { 
  petsList[index].checked = element.target.checked; 
  setPetsList(petsList); 
};

以上例子想根據複選框的狀態來更新數據對應的checked屬性，但如果照上面的方式來執行會遇到頁面無法更新狀態，因為petsList引用沒有發生變化，使得React無法觀察或觸發重新渲染。
要解決此問題，可使用setState()或useState()函數，來確保更新的資料會被React確認後DOM能正確重新渲染，還可以使用map()或spread syntax來避免改變到其他狀態值

const modifyPetsList = (element, id) => { 
  const {checked } = element.target; 
  setpetsList((pets) => { 
    return pets.map((pet, index) => { 
      if (id === index) { 
        pet = { ...pet, checked }; 
      } 
      return pet; 
    }); 
  }) ; 
};

8. 忘記setState是異步

React中的狀態是異步，但很容易忘記這一點。這表示所做的任何修改不會立即生效，而且可能會在下次渲染時才生效。因此當設置狀態值變更的當下立即訪問，可能會無法獲得最精準結果。

handlePetsUpdate = (petCount) => {
  this.setState({ petCount });
  this.props.callback(this.state.petCount); // Old value
};

可以通過setState()提供第二個可以選擇的參數來解決此問題，該參數將充當回調函數。使用更改更新狀態後，立即調用回調函數。

handlePetsUpdate = (petCount) => {
  this.setState({ petCount }, () => {
    this.props.callback(this.state.petCount); // Updated value
  });
};

當然同樣的狀況也可用於useState()，除了沒有跟setState()類似的回調函數。相反的可以使用useEffect來獲得相同的結果。