[react] setState异步带来的可能问题

当首先有一个ProTable组件时,点击查询触发时间,其中有设置该组件的状态,也有设置嵌套表格中的ProTable

 /**
   * 搜索提交事件,table加载失败reload
   * @param {*} values
   */
  const searchSubmit = (values) => {
    console.log(values);
    if (values.dimension === "person") {
      console.log("我进来了");
      setSubUrl(REQUEST_OUTLAY_PERSON_BY_DEPARTMENT_GET);
      setSubColumns(personColumns);
      console.log(subUrl);
    }
    if (values.dimension === "product") {
      setSubUrl(REQUEST_OUTLAY_PRODUCT_BY_DEPARTMENT_GET);
      setSubColumns(productColumns);
    }
    setCondition(values);
    setColumns(departmentColumns);
    console.log("departmentColumns: ",departmentColumns);
    console.log("values",values);
    setUrl(REQUEST_OUTLAY_DEPARTMENT_GET);
    console.log("url",url);
    setExpandedRow({ expandedRowRender });
    tableRef.current && tableRef.current.reloadAndRest();
  };

由于setState的异步效果,即,当前的更新值不一定会立即执行,需要某些事件发生之后,才会执行。某些事件就是指组件必须先渲染出来,然后再设置值填上去,也可以看到setExpandedRow是之后要做的事。

所以嵌套表格中的内容需要等点击扩展按钮之后才会呈现,在它呈现之前,设置值都不会马上更新。它利用的还是setExpandedRow、渲染组件时,那个旧的state。

[解决思路]
可以考虑,直接使用let定义这样的一个变量,本身这个变量也不会作为一个内容在组件中去渲染。

  //设置嵌套表格中的url变化
  let subUrl;
  //设置嵌套表格中的columns的变化
  let subColumns;

另外,在useCallback中调用请求函数时,依赖subUrl并不会有效,因为subUrl并不是一个状态,而只是一个变量。所以,可以直接舍弃useCallback。没有用useEffect,性能不会差太多。

 /**
   * 获取嵌套表格中的数据
   */
  const getSubData = () => {
    return new Promise((res) => {
      const { department } = rowRecord;
      const params = {
        department: department,
      };
      curl
        .get(subUrl, params)
        .then((response) => {
          const { data } = response;
          res({
            data: data,
            success: true,
          });
        })
        .catch(() => {
          res({
            data: [],
            success: false,
          });
        });
    });
  };

真正原因为,ProTable的request属性本身就只请求一次,真正让它重新请求是靠一个ref对象,引用ProTable,使用方法reloadAndRest()重新加载数据

const tableRef = useRef();
<ProTable actionRef = {tableRef} />
const submitEvent = () => {
	tableRef.current && tableRef.current.reloadAndRest();
};

所以说使用useCallback也是多余的,本来也不会随随便便请求

posted @ 2021-08-01 23:01  chickenWu  阅读(361)  评论(0)    收藏  举报