重复setState调用(钩子)

Question

我正在实施一个简单的预订服务。

当第一次使用该服务时，用户可以选择不使用signIn的时间，

但如果按下预订按钮，用户将被重定向到signIn页面，

如果完成登录，页面必须返回到先前选择的状态。

(对不起我的英语)

我用状态来管理时间

const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
const [viewMonth, setViewMonth] = useState(() => new Date().getMonth());
const [clicked, setClicked] = useState(() => new Date().getDate());

如果有前面的选择，我使用'useEffect‘来显示前面的内容。

useEffect(() => {
  if(location.state) {
    setViewYear(Number(location.state.userSelect.date.split("-")[0]));
    setViewMonth(Number(location.state.userSelect.date.split("-")[1])-1);
    setClicked(Number(location.state.userSelect.date.split("-")[2]));
    return;
  }
  // ...some codes...//
}, [])

在这种情况下，由于"setState“被使用了三次，呈现就发生了三次。我觉得很奇怪，想找人帮忙。

Answer 1

您的代码不会调用setState 3次。React将在一个批处理中调用这些函数(可能在下一个批次中)，您将没有性能问题。如果您不想将代码视为您的代码，可以使用对象类型useState钩子，如下所示。

const [date, setDate] = useState(() => {
    const date = new Date()
    return {
        year: date.getFullYear(),
        month: date.getMonth(),
        date: date.getDate()
    }
}

useEffect(() => {
    if(location.state) {
        const date = location.state.userSelect.date.split('-')
        setDate({ year: date[0], month: date[1] - 1, date: date[2] })
    }
    // ...some codes...//
}, [])