React函数式编程关于属性默认值以及请求时序的问题？

Question

页面逻辑： 根据条件筛选数据，条件： 项目 和 起止日期，项目在加载时设置默认值，起止日期设置默认值。

const [project, setProject] = useState('aaa');
const [duration, setDuration] = useState([moment(), moment()]);

页面加载时：

useEffect(()=>{
    getProjectList();
}, [])

属性变更时：

useEffect(()=>{
    fetchPreviewData(project, duration);
}, [project, duration])

问题一： 页面加载时，会执行两次fetch操作，原因是，project 和 duration 都触发了set操作。

问题2：请求时序问题。
选择项目 ---》 发出请求1 --》 变更起止日期 --》 发出请求2 ---》 请求2返回数据 ---》 加载数据 ---》 请求1返回数据 ---》 再次加载数据。
最后加载的数据为请求1的内容，所以数据不正确。

Answer 1

问题一：

onst [state, setState] = useState({
  project: 'aaa',
  duration: [moment(), moment()]
});

useEffect(() => {
  getProjectList();
}, []);

useEffect(() => {
  fetchPreviewData(state.project, state.duration);
}, [state]);

问题二的解决方案：

useEffect(() => {
  let isCancelled = false;

  const fetchData = async () => {
    const result = await fetchPreviewData(state.project, state.duration);
    if (!isCancelled) {
      // 更新数据
    }
  };

  fetchData();

  return () => {
    isCancelled = true;
  };
}, [state]);

Answer 2

触发了2次请求是因为你的依赖性里面就是[project, duration] 这里是2个，任何一个变化都会执行。属性变更是，你应该是使用onChange 这样的事件。