如何更新 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()...的代码，但可能它通过突变更新状态，因此组件获得相同的对象引用 - 浅层比较 - 没有区别，没有理由重新渲染。

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

如果不是以上，那么整个通过state就是问题的根源（与上面的原因相同）。

只需以这种方式仅emp作为 prop 传递或使用函数setState()（为整个状态返回一个新对象）即可。