javascript - 如何在单击按钮时更新 useEffect() Hook 的值

Question

我有一个功能组件，我在其中创建了一个按钮。我也在使用“Use_effect()” Hook 。我主要是重新渲染功能组件，在单击按钮时更新 use_effect() Hook 。

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() Hook 中的状态值。因此，当重新渲染时再次调用 EmpForm 时，它会显示更新后的列表。

Answer 1

您没有提供 removeEmpFromList() 的代码 ... 但可能它通过突变更新状态因此组件获得相同的对象引用 - 浅比较 - 没有区别，没有理由重新渲染.

修改 removeEmpFromList() 方法为 emp 创建一个新对象 - f.e.使用 .filter。

如果不是以上，则传递整个 state 是问题的根源(与上述相同的原因)。

只需将 emp 作为 prop 传递或使用 setState() 中的函数(为整个状态返回一个新对象)this way .