我正尝试使用新的props值更新 Ant-Design UI 中的 Progress 和 Steps 组件,如下所示:
import React from 'react';
import { Progress, Steps } from 'antd'
const Step = Steps.Step
const Parent = ({ a }) => {
const haveCompleted = () => {
var intr = setInterval(() => {
if(c < 754) {
console.log(c)
return c++
}else {
clearInterval(intr)
}
}, 300)
}
return (
<React.Fragement>
<div>
<Steps> />
<Step description={a !== null ? haveCompleted() : null} ... />
<Step ... />
</Steps>
</div>
<div>
<Progress percent={haveCompleted()/754*100 || 0} ... />
</div>
</React.Fragement>
)
}
export default Parent;
登录到浏览器控制台时,该值会在功能中更新,但不会反映在组件中。
我在做什么错?
答案 0 :(得分:0)
您没有在任何地方更新状态。您只是在执行内联函数。应将状态传递给组件,然后重新渲染受影响的孩子,否则您的组件应保持状态。从Ant
文档中可以看到,current
上应该有一个Steps
道具,但尚未包含在内。最后,description
道具的类型为string
| ReactNode
,并且您的函数均未返回。
答案 1 :(得分:0)
上述有用的人指出的值得关注的错误:
state
渲染组件解决方案:
State
的{{1}} c
生命周期方法内调用haveCompleted
函数以更新ComponentDidUpdate
State
直接传递给子组件