反應：父類和子元素之間的未捕獲類型錯誤

我已經將一個組件分割爲父元素和子元素。我通過狀態將父數據傳遞給孩子，但接收到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

反應：父類和子元素之間的未捕獲類型錯誤

回答

相關問題