useEffect第二个参数

Question

如题，需求是页面初始化时和搜索时请求表格数据。假设表格请求是fetch，然后写到useEffect里面，

//自定义hook
const useFecth=()=>{
    //搜索值
    const [val,setval ]=usestate('')  //val是string
    //表格数据
    const [list,setlist]=usestate([]) //list是数组
    useEffect(()=>{
          const hfetch=()=>fetch.then(setlist)
        hfetch()
    },[val])

    return setval
}

那么问题来了，如果我新增了一行数据，要想显示到页面上，是要再次请求表格数据更新页面，此时如果通过setval的话要怎么重新请求，因为此时搜索值val并没有改变。

另一个想法是把hfetch写到useEffect外面并return出去，然后新增或者编辑完直接调用此方法，但是感觉这种方法并不好，

Answer 1

可以写成下面这样,不过我建议你还是不要在这上面浪费时间了，直接使用react-query吧

const useTableQuery = (searchVal) => {
  const [data, setData] = useState(undefined);
  const [needRefetch, rerender] = useState({});
  const refetch = useCallback(() => {
    rerender({});
  }, []);

  useEffect(() => {
    const hfetch = () => fetch.then(setData);
    hfetch();
  }, [searchVal, needRefetch]);

  return {
    data,
    refetch
  };
};

export default function App() {
  const [val, setval] = useState();
  const { data, refetch } = useTableQuery(val);

  return (
    <div className="App">
      <button
        onClick={() => {
          /**
           * 当添加数据后需要重新调接口时，直接调用refetch()
           */
          refetch();
        }}
      >
        添加一条数据
      </button>
    </div>
  );
}

Answer 2

你把自己绕进去了吧。useEffect是一种触发机制，你的代码应该形似：

useEffect(() => {hfetch(val)},[val]);
const hfetch=(val)=>{...};
const saveData = (data) => {
    do().then(() => hfetch(val);
}

也就是当val被改变的时候通过effect触发数据拉取，同时也可以在自己需要的时候直接调用数据拉取。当然你可以在保存之后这样搞：

const saveData = (data) => {
    do().then(() => setVal({...val});
}

不过感觉没必要而已。