如何为新的更新的道具值重新呈现子组件

时间:2019-04-13 15:35:17

标签: reactjs antd

我正尝试使用新的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;

登录到浏览器控制台时,该值会在功能中更新,但不会反映在组件中。

我在做什么错?

2 个答案:

答案 0 :(得分:0)

您没有在任何地方更新状态。您只是在执行内联函数。应将状态传递给组件,然后重新渲染受影响的孩子,否则您的组件应保持状态。从Ant文档中可以看到,current上应该有一个Steps道具,但尚未包含在内。最后,description道具的类型为string | ReactNode,并且您的函数均未返回。

答案 1 :(得分:0)

上述有用的人指出的值得关注的错误:

  • 不使用state渲染组件

解决方案:

  • 将父组件更改为基于类
  • 添加名为State的{​​{1}}
  • c生命周期方法内调用haveCompleted函数以更新ComponentDidUpdate
  • 将状态State直接传递给子组件