Question

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

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

我在做什么错？

Answer 1

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

Answer 2

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

不使用state渲染组件

解决方案：

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

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

2 个答案: