javascript - 如何在 React Hooks 中使用 setTimeout 更新状态值？

Question

我尝试使用 setTimeout 函数在一段时间后重置状态值。

const SetTimeout = props => {
  let [errorText, setError] = useState(
    props.errorMessage ? props.errorMessage : ""
  );
  useEffect(() => {
    if (errorText !== "") {
      setTimeout(() => {
        setError("");
      }, 4000);
    } else {
      // console.log("no error")
    }
  }, [errorText]);
  return <div>{errorText}</div>;
};

const MapStateToProps = state => {
  return {
    errorMessage: state.errorReducer.error
  };
};

我从 API 调用中获取了 errorMessage，一段时间后我尝试使用 useState 将该消息清空。

但是组件正在重新渲染，并显示相同的错误消息。你能帮我解决这个问题吗？

Answer 1

您在这里混合了组件状态和 redux 状态，这非常糟糕，也是您看到这种行为的原因。

您最初使用 Redux 中的错误消息渲染组件，并将其作为属性值传递到组件中。组件显示它，设置它自己的状态值。超时后，它会更新自己的状态，这会导致重新渲染，并且 Redux 值再次通过属性传递到组件中。

我建议您忘记使用 useState 并使用 Redux 操作来清除它存储的错误消息。