0

我在从 API 获取从子级到父级的数据时遇到问题

孩子：

class Carton extends React.Component {
 constructor(props) {
 super(props);

 this.state = {
  loading: false,
  matchData: []
};
}

在这里，我从 API 获取数据并更新状态

async componentDidMount() {
 setTimeout(() => {
  this.loading = true;
  fetch(url)
    .then(res => res.json())
    .then(data => {
      this.setState({
        matchData: data.doc[0].data[this.props.sportId].realcategories
      });
    });
}, 500);

我已经从 API 循环访问嵌套对象并将其显示在子对象中，但我不知道如何将嵌套对象的数据获取到父对象。这是一个示例，我需要多深才能获得所需的值

getData() {
      this.state.matchData.map((data, i) =>
      data.tournaments.map((tour, j) =>
        tour.matches.map((matc, k) =>
        //values of objects that i need to render a card in Child component
        )//...

我的第一个问题是练习从父级的 API 获取数据然后将对象传递给子级是否更好？

如何将这些对象传递给父对象，以便我可以迭代并选择其中的前 5 个，例如

如果有人有任何想法或建议，请告诉我

溴

斯蒂沃

4

2 回答 2

1

我的第一个问题是练习从父级的 API 获取数据然后将对象传递给子级是否更好？

这取决于。如果您的父对象需要在子对象内部不发生任何事件（例如单击、焦点、模糊等）的情况下了解子对象，那么是的，API 调用应该发生在父对象内部。如果不是这种情况，并且父级只需要知道对子级执行了哪些子元素，那么您可以使用从父级传递给子级的函数。

例如：

class Parent {
  const handleSelection = childData => {
    doSomething(childData)
  }

  render() {
    return(
      <Child handleSelection={handleSelection} />
    )
  }
} 

class Child {
  render() {
    const { myData } = this.state;
    return(
      <div onClick={() => this.props.handleSelection(myData)} />
    )
  }
}

当用户单击子组件中的 div 时，这会将数据从子组件传回父组件。希望这可以帮助。

于 2019-11-17T20:37:20.773 回答
0

您可以为此目的使用回调，并在父组件中为matchData创建一个状态变量。然后将matchData状态传递给孩子。当您在 componentDidMount 中进行 API 调用时，调用回调函数（在父级中定义），将您从 API 获取的数据作为 args 发送。进一步在回调函数中，设置matchData状态变量，然后它会自动重新渲染父级和子级。

于 2019-11-17T20:11:04.983 回答