代码之家 › 专栏 › 技术社区 › sioesi

钩子值未更新

react-hooks reactjs

sioesi · 技术社区 · 5 年前

我有以下几点:

const [quantityKm, setQuantityX] = useState({ x: 0 });

我有一个范围,当它改变时,执行以下函数

const handleKmValue = (event) => {
    const { x } = event;
    setQuantityX({ x: x});
};

然后,如果我改变 <select> 必须执行此函数

const calculatePrice = () => {
    console.log(quantityKm.x);
    setValueMonth((parseFloat(quantityKm.x.toFixed(2)) * valueOfKm))
};

但是,我总是得到 quantityKm.x 作为0

1 回复 | 直到 5 年前

Mickey 5 年前

从您的评论来看,您的代码结构如下:

const [quantityKm, setQuantityX] = useState({ x: 0 });

const handleKmValue = ...
const calculatePrice = ...

const handleChange = event => {
    handleKmValue(event);
    calculatePrice();
}

<Select onChange={handleChange} />

相反,使用:

const [quantityKm, setQuantityX] = useState({ x: 0 });

useEffect(() => {
    // move the calculatePrice functionality into the effect
    console.log(quantityKm.x);
    setValueMonth((parseFloat(quantityKm.x.toFixed(2)) * valueOfKm))

}, [quantityKm.x]) // run effect if value's changed

<Select onChange={handleKmValue} />

推荐文章

Jonas · 反应挂钩-编辑后更新列表中的项目

2 年前

Selcukusu · 为什么在show-axios-react之后无法清除错误消息

2 年前

swamp blues · 如何从自定义挂钩收集和返回多个函数

2 年前

Daniel · 钩子中的状态跟踪和道具-React如何保持(跟踪)钩子中的状态和道具?

2 年前

Ben_Sven_Ten · 使用自定义IntersectionObserver钩子响应钩子/穷举deps警告

2 年前

FettFrank · 测量渲染React组件的时间

2 年前

ManP22 · 我想在同一次单击中调用两个常量

2 年前

Dhruv B. · 为什么{text.length}在react中不起作用。js代码。我想要更改状态文本的长度。请帮帮我

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

David · 如何多次使用fetch-get响应?

2 年前