Question

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

现在，在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

Answer 1

从哪里开始 -

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

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

在渲染方法中，您希望从映射函数中取名，而不是从状态中取名。我还删除了名称状态，你真的想保留名字而不是一个名字。我必须调整很多小东西以使其工作，所以我将在这里发布工作代码笔，这样你就可以看到需要做什么。

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

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

1 个答案: