如何重新渲染子组件以获得新的更新道具值

Question

我正在尝试使用新的 props 值更新 Ant-Design UI 中的进度和步骤组件，如下所示：

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文档中看到的，应该有一个你没有包含Steps current道具。最后description道具的类型是 string | ReactNode，您的函数不返回任何内容。

Answer 2

上面

有帮助的人指出的值得注意的错误：

• 不使用state来呈现组件

溶液：

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