将状态变量输出作为字符串反应，但将 undefined 作为道具传递答案

【问题标题】：React state variable output as string but passes undefined as a prop将状态变量输出作为字符串反应，但将 undefined 作为道具传递
【发布时间】：2019-04-18 22:51:11
【问题描述】：

我不明白为什么我能够毫无问题地渲染状态变量的值，但是当我将它作为道具传递给子组件时，值变得未定义。

以下截断源代码：

this.state.pdf 使用下面的代码 sn-p 正确呈现 url。

render() {
  return (
   ....
   <div>
   <label>PDF:</label>
   <textarea rows="4" cols="100" name="pdf" value={this.state.pdf} onChange={this.onChange} placeholder="PDF URL" />
</div>
   ....

...稍后在渲染函数中，我将相同的状态变量传递给另一个组件以渲染实际的 PDF。

<div>
  <MammaPDF pdf={this.state.pdf} />
</div>

MammaPDF 类 sn-p：

class MammaPDF extends Component {
  constructor(props) {
   super(props);
   this.state = {
   numPages: null,
   pageNumber: 1,
   pdf: null,
 } 
}

componentDidMount(){
    pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
    console.log("MammaPDF PROPS: ",this.props);  <--- pdf is undefined
    const pdf = this.props.pdf; <---pdf is undefined
    ....
}

【问题讨论】：

标签： reactjs

【解决方案1】：

可能有一种情况，this.state.pdf 在传递给MammaPdf 组件时没有解析。所以你应该等待它被解决，然后调用组件。

你能试试下面的代码吗：-

<div>
  {this.state.pdf && <MammaPDF pdf={this.state.pdf} />}
</div>

【讨论】：

@Zach 这也是依赖于异步操作（如从后端获取）的组件的常见模式。如果 this.state.pdf 不存在，它将阻止渲染 MammaPDF。
解决了！谢谢泰森和马特！一旦允许我就会接受答案。