如何更新按钮单击时useEffect（）挂钩的值

Question

I have a functional component and I have created a button inside it. I am also using a "Use_effect()" hook. My main is to re-render the functional component, update the use_effect() hook when the button is clicked.

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]

        })

      }

When I click the Remove button , it will basically remove the employee from the list. The function removeEmpFromList will update the state. The functional component EmpForm basically shows the list of all employees.

So I want to re-render the page so that, it updates the state value in useEffect() hook. So when EmpForm is called again on re-rending it shows the updated list.

Answer 1

You didn't provide the code for removeEmpFromList() ... but probably it updates the state by mutation therefor component gets the same object ref - compared shallowly - no difference, no reason to rerender.

Modify removeEmpFromList() method to create a new object for emp - fe using .filter .

If not above then passing entire state is the source of problem (the same reason as above).

Simply pass only emp as prop or use functions in setState() (to return a new object for the entire state) this way .

Answer 2

I figured it out! Thanks for the help guys. So, it was not re-rendering because initally, useEffect() second parameter was [] , if you change it to props.state then it will update the changes made to the state and re-render the component automatically.

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