反應 - 在兄弟之間傳遞數據並迭代它

我有兩個問題，第一個是關於在組件之間傳遞數據，第二個是關於組件層次結構。反應 - 在兄弟之間傳遞數據並迭代它

眼下，在Data組件我想設置name屬性，並將其傳遞給迭代應該基於API請求ListItem組件。我嘗試了許多沒有成功的事情。我究竟做錯了什麼？設置新狀態時是否需要重複數據？我是否正確傳遞？

基本僞

閱讀來自API的數據
集數據組件狀態
創建一個基於存儲的數據的兄弟姐妹組件
渲染組件

第二問題是關於組件的層次結構。我一直在網上閱讀，數據請求應設置在頂部並分開。有了這個，其他組件將從這些數據中提供並執行。最後，App組件將相應地呈現所有這些組件。從下面的例子中，我會走向正確的軌道嗎？我是否正確地創建了特定於數據請求的組件？或者應該在App組件中完成此操作嗎？

我明白這些問題可能是基本的，但這是我真正努力去理解的東西，如果有人能夠幫助我理解或指向我可以消化的基本示例，我將不勝感激。

預先感謝您。（對不起，我有兩個以上的問題。）

class App extends React.Component { 
    render() { 
    return (
     <ul> 
     <ListItem name={this.state.name} /> 
     </ul> 
    ) 
    } 
} 


class Data extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     name: '', 
     requestFailed: false, 
    } 
    } 

    componentDidMount() { // Executes after mouting 


    fetch('https://api.tfl.gov.uk/BikePoint') 
    .then((response) => { 
     return response.json() 
    }).then((d) => { 
     console.log('parsed json', d[0].commonName) 
     this.setState({ 
      name: d.commonName 
     }); 
    }).catch(function(ex) { 
     console.log('parsing failed', ex) 
     this.setState({ 
      requestFailed: true 
     }) 
    }) 
    } 

    render() { 

    if(this.state.requestFailed) return <p>Request failed.</p> 
    if(!this.state.name) return <p>Loading</p> 

    const namesList = names.map(function(name, index){ 
     return <ListItem key={index} name={this.state.name} /> 
    }) 

    return <ul>{ namesList }</ul> 
    } 
} 

class ListItem extends React.Component { 
    render() { 
    return <li> { this.props.name } </li> 
    } 
} 

ReactDOM.render(<App />, document.getElementById('app'));

CodePen

來源

2017-07-26 Diego Oriani