React 函数在第二个 onClick 上更新状态？答案

【问题标题】：React function updates state on second onClick?React 函数在第二个 onClick 上更新状态？
【发布时间】：2021-03-01 00:40:02
【问题描述】：

我正在开发一个酒店功能，用户可以过滤并显示相应的可用房间，但是当我设置 onClick 以更新过滤器并显示过滤后的房间时，房间在第二次点击后正确显示并出现之后。

const toggleSelection = (e) => {
    setFilters((prevFilters) => ({
      ...prevFilters,
      [e.name]: e.id,
    }));
    filterRooms();
  };

const filterRooms = () => {
   ....
   ....
    setRooms((prevRooms) => ({
      ...prevRooms,
      filtered: filtered_rooms,
    }));
  };

【问题讨论】：

你能用 JSX 放更详细的代码吗

标签： reactjs react-hooks use-state

【解决方案1】：

useState()（和类组件的this.setState()）are asynchronous，因此您的第二个状态更新程序在运行时不会有filtered_rooms 的最新值。

而不是：

const [some_state, setSomeState] = useState(...);
const [some_other_state, setSomeOtherState] = useState(...);

const someHandler = e => {
  setSomeState(...);
  setSomeOtherState(() => {
    // Uses `some_state` to calculate `some_other_state`'s value
  });
};

您需要在useEffect 钩子中添加setSomeOtherState，并确保将some_state 标记为依赖项。

const [some_state, setSomeState] = useState(...);
const [some_other_state, setSomeOtherState] = useState(...);

useEffect(() => {
  setSomeOtherState(() => {
    // Uses `some_state` to calculate `some_other_state`'s value
  });
}, [some_state]);

const someHandler = e => {
  setSomeState(...);
};

很难对您的代码提出建议，因为它经过了相当的编辑，但它可能看起来像这样：

const filterRooms = () => {
  // ...
  setRooms((prevRooms) => ({
    ...prevRooms,
    filtered: filtered_rooms,
  }));
};

useEffect(() => {
  filterRooms();
}, [filtered_rooms]);

const toggleSelection = (e) => {
  setFilters((prevFilters) => ({
    ...prevFilters,
    [e.name]: e.id,
  }));
};

请参阅this codepen 了解一个简单（尽管有点做作）的示例。

【讨论】：