如何更新按鈕單擊時useEffect（）掛鈎的值

Question

我有一個功能組件，我在其中創建了一個按鈕。 我也在使用“Use_effect（）”鈎子。 我的主要是重新渲染功能組件，在單擊按鈕時更新use_effect（）鈎子。

const Emp_list = (props) => {
  useEffect(() => {
    props.getList(props.state.emp);
  }, []);

    return (

      <div>
        {props.state.emp.map((val ) =>   
               {val.feature_code}
               {val.group_code}
    <button onClick = {() => props.removeEmpFromList(val.feature_code)} > Remove </button>

        <EmpForm empList={props.state.emp} 
                    onChangeText = {props.onChangeText}
                   />
        </div>

        <button onClick=  {() => props.getdata (props.state)}>Get Names</button>
        <p> 
      </div>

    );

  };

export default Emp_list;

    removeEmpFromList = (i) => { 
      const remaining = this.state.emp( c => c.feature_code !== i)
      this.setState({
      emp: [...remaining]

        })

      }

當我單擊“刪除”按鈕時，它基本上會從列表中刪除該員工。 函數removeEmpFromList將更新狀態。 功能組件EmpForm基本上顯示了所有員工的列表。

所以我想重新渲染頁面，以便更新useEffect（）鈎子中的狀態值。 因此，當再次調用EmpForm時，它會顯示更新的列表。

Answer 1

你沒有提供removeEmpFromList()的代碼......但可能它通過變異更新狀態組件得到相同的對象ref - 比較淺 - 沒有區別，沒有理由重新渲染。

修改removeEmpFromList()方法，使用.filter為emp -fe創建一個新對象。

如果不在上面，則通過整個state是問題的根源（與上述相同的原因）。

只需通過僅emp作為道具或使用功能setState()返回一個新的對象為整個州） 這種方式 。

Answer 2

我想到了！ 謝謝你的幫助。 因此，它不是重新渲染，因為最初，useEffect（）第二個參數是[]，如果將其更改為props.state，則它將更新對狀態所做的更改並自動重新呈現組件。

  useEffect(() => {
    props.getList(props.state.emp);
  }, [props.state.emp]);