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

您没有提供downloaded_path = pytube.download(sampler_settings.AUDIO_PATH, video_title) downloaded = File(open(downloaded_path, 'rb')) # create folder by the name of current session key where the downloaded file will be stored session_folder = os.path.join(sampler_settings.AUDIO_PATH, session_key) os.mkdir(session_folder) main_sample = MainSample() main_sample.session_key = session_key main_sample.audio = os.path.join(session_folder, video_title) main_sample.save()的代码...但是可能它通过突变来更新状态，因此组件获得的对象引用相同-比较浅-没有差异，没有理由重新渲染。

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

如果没有超过上述限制，那么通过整个.filter是问题的根源（与上述原因相同）。

仅将state作为属性传递，或在emp中使用函数（以返回整个状态的新对象）this way。

Answer 2

我知道了！感谢您的帮助。因此，它没有重新渲染，因为useEffect（）的第二个参数最初是[]，如果将其更改为props.state，它将更新对状态所做的更改并自动重新渲染组件。

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

如何更新useEffect（）的值，请单击按钮

2 个答案: