Question

我正在使用antD的步骤并在更新步骤w.r.t时遇到问题。道具变了。

 import Step1 from './step1.js'
  import Step2 from './step2.js'
  import {Steps} from 'antD'
  state={ 
          list:[] 
          step: [
           {
            title : "first"
            content : this.step1()
           } 
           {
            title : "Second"
            content : <Step2 list={this.list}/>
           } 
         ]
       }



step1=()=>{
return (
<Step1/>
)
}
 render(){
<div >
        <Steps current={current}>
          {this.state.step.map((item) => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>
        <div >{this.state.step[current].content}</div>
        <div>
          {current < this.state.step.length - 1 && (
            <Button type="primary" onClick={() => this.next()}>
              Next
            </Button>
          )}
          {current === this.state.step.length - 1 && (
            <Button
              type="primary"
              onClick={() => message.success("Processing complete!")}
            >
              Done
            </Button>
          )}
          {current > 0 && (
            <Button onClick={() => 
                this.prev()}>
              Previous
            </Button>
          )}
        </div>
      </div>

}

每次功能this.state.list触发时，

f都会更新，但是Step2中的列表不会更新。通过始终为null。

编辑：如何访问step1()内部状态。 this将在状态内引用状态。

这是我完整的代码。

Answer 1

不要将React元素置于状态-这样做经常会破坏事物，尤其是当它们需要在渲染之间更改道具时。

相反，这样React可以自然地更新子组件的props，在render方法内部声明并传递子组件，以便每当状态更新时，可以使用新道具被传下来。

例如，而不是：

render() {
  return (
    <div>
      {this.state.step[1].content}
    </div>
  )
}

做

render() {
  return (
    <div>
      <Step2 list={this.list} />
    </div>
  )
}

更新状态变量并在反应状态中调用？

1 个答案: