反应：父类和子元素之间的未捕获类型错误

我已经将一个组件分割为父元素和子元素。我通过状态将父数据传递给孩子，但接收到Uncaught TypeError：无法读取null的属性'imageSource'，这很奇怪，因为我遵循与应用程序的另一个元素相同的过程。我也遵循组件和道具文档，但仍然有点难住。反应：父类和子元素之间的未捕获类型错误

如果我已经定义了状态，将其设置并添加为属性给孩子，状态如何仍然null？

class Parent extends React.Component { 

constructor(){ 
    super(); 
    this.state = { 
    imageSource: [], 
    imageTitles: [], 
    } 
} 

componentDidMount(){ 

... 
... 
// grabbing stuff from Dropbox API 
... 
... 

    .then(function(){ 
    that.setState({ 

     imageSource: sources, 
     imageTitles: titles, 

    }); 
    }); 



render(){ 
    return(
     <Child imageSource={this.state.imageSource} imageTitles= 
     {this.state.imageTitles} /> 
    ); 
} 
} 



class Child extends React.Component{ 

render(){ 
    if(!this.state.imageSource.length) 
     return null; 

     let titles = this.state.imageTitles.map((el, i) => <p>{el}</p>) 

     let images = this.state.imageSource.map((el, i) => 

     <div className="imageContainer"> 
      <img key={i} className='images' src={el}/> 
      <div className="imageTitle">{titles[i]}</div> 
     </div> 
     ) 

    return (
     <div className="ChildWrapper"> 
     {images} 
     </div> 
    ); 
    } 
}

来源

2017-08-24 r_cahill

在孩子中，你会收到变量作为道具（不是状态）。

在你的情况下，该代码应工作

if(!this.props.imageSource.length) 
    return null; 

    let titles = this.props.imageTitles.map((el, i) => <p>{el}</p>) 

    let images = this.props.imageSource.map((el, i) => 

    <div className="imageContainer"> 
     <img key={i} className='images' src={el}/> 
     <div className="imageTitle">{titles[i]}</div> 
    </div> 
    )

看看这个问题，我认为这将有助于你理解的差异。

What is the difference between state and props in React?

来源

2017-08-24 15:47:45

几件事情中脱颖而出。这段代码在这里：

class Child extends React.Component{ 

render(){ 
    if(!this.state.imageSource.length) 
     return null;

是错误的，因为你的孩子组件具有没有国家。你没有在你的Child组件中声明任何状态，你可能不应该这样做。它所具有的道具从Parent组件传下来。这是学习反应的关键部分。你想要在这里检查的是if(!this.props.imageSource.length)并编辑你的附加代码，调用this.state并替换this.props。

另一件事我注意到的是：

that.setState({ 

     imageSource: sources, 
     imageTitles: titles, 

    });

为什么that.setState({...})？这很令人困惑，而且真的没有理由让你这么称呼它。它应该始终是this.setState({...})如果你正在做一些this的重新绑定，你做错了事情，因为它不应该是这种情况，并可以很容易地导致错误。

来源

2017-08-24 15:48:46

反应：父类和子元素之间的未捕获类型错误

回答

相关问题