[React] 使用Hooks时使用setFieldsValue设置初始值无效的问题

原文链接: https://juejin.cn/post/6844904129253359623

在这里插入图片描述
错误:

  useEffect(() => {
    if (formConfigListValues.length === 0) {
      form.resetFields();
      if (statusId) {
        form.setFieldsValue({flowStatus: 1});
      }
    }
  }, [formConfigListValues, statusId]);

因为formConfigListValues在每次操作完表单时候要走一遍,但是导致了,审批状态一直不会变(也就是操作审核状态失效);

正确:

  useEffect(() => {
    if (formConfigListValues.length === 0) {
      form.resetFields();
    }
  }, [formConfigListValues]);
  
  useEffect(() => {
      if (statusId) {
        form.setFieldsValue({flowStatus: 1});
      }
  }, [statusId]);

在hooks中使用setFieldsValue,还要注意写代码的顺序和层级结构(如:新加的setFieldsValue到底放在里边还是外边,放到外边的话是否要注意,要放在resetFields所在useEffect的下边)。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React Hooks 是 React 16.8 中新增的特性,它允许函数组件中使用 state 和其他 React 特性,从而使函数组件具有类组件的能力。 使用 React Hooks 需要先引入 React 的 useState、useEffect 等钩子函数,然后在函数组件中使用它们。 useState useState 是最常用的 Hook 之一,它可以让我们在函数组件中使用 state。useState 接收一个初始值作为参数,并返回一个数组,数组的第一个元素是当前 state 的值,第二个元素是更新 state 的函数。 例如,下面的代码在函数组件中使用了 useState 来保存一个计数器: ``` import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ``` useEffect useEffect 是另外一个常用的 Hook,它可以在函数组件中使用副作用。副作用包括数据获取、订阅或手动修改 DOM 等操作。useEffect 接收一个函数作为参数,该函数会在组件渲染完成后执行。 例如,下面的代码使用 useEffect 来更新页面标题: ``` import React, { useState, useEffect } from 'react'; function PageTitle() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ``` useContext useContext 可以让我们在函数组件中使用 Context。Context 是一种在组件树中传递数据的方法,它可以避免通过 props 层层传递数据。 例如,下面的代码使用 useContext 来获取全局的主题: ``` import React, { useContext } from 'react'; const ThemeContext = React.createContext('light'); function ThemeButton() { const theme = useContext(ThemeContext); return ( <button style={{ background: theme.background, color: theme.foreground }}> I am styled by theme context! </button> ); } ``` 使用 useContext 前需要先创建一个 Context,可以使用 React.createContext 方法来创建。 除了上述三个 Hook,还有 useReducer、useCallback、useMemo、useRef 等 Hook 可以使用使用这些 Hook 可以让函数组件更加强大和灵活。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值