React——在兄弟姐妹之间传递数据并迭代它

Question

我有两个问题，第一个是关于在组件之间传递数据，第二个是关于组件层次结构。

现在，在 Data 组件中，我试图设置 name 属性并将其传递给 ListItem 组件，该组件应基于 API请求。我尝试了很多事情都没有成功。我究竟做错了什么？设置新状态时是否需要迭代数据？我传递的正确吗？

基本伪代码

从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

Answer 1

从哪里开始 -

首先，您的 App 组件需要渲染 Data 组件。 React 的工作方式是父元素始终呈现子元素，未呈现的内容不存在。

然后，您需要重新映射对名称的响应，如果这是您想要做的 - 我不确定。

在 render 方法中，您想从映射函数中获取名称，而不是从状态中获取名称。我还删除了名称状态，你真的想保留名称而不是一个名称。有很多小东西我必须调整才能让它工作，所以我将 post 在这里工作代码笔，这样你就可以看到需要做什么。

https://codepen.io/anon/pen/eEmqxX?editors=0010

React——在兄弟姐妹之间传递数据并迭代它

React — Passing data between siblings and iterating it

reactjs

loops

components

siblings