ReactJS -遍历子对象并在父对象中显示前10个子对象

Question

我在从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
        )//...

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

如何将这些对象传递给父对象，这样我就可以遍历并选择前5个对象，例如

如果任何人有任何想法或建议，请让我知道

Br

Stevo

Answer 1

我的第一个问题是，练习从parent中的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时，这会将数据从子组件传递回父组件。希望这能有所帮助。

Answer 2

为此，您可以使用回调，并在父组件中为matchData创建一个状态变量。然后将matchData状态传递给子对象。在componentDidMount中调用API时，调用回调函数(在父函数中定义)，将从API获取的数据作为args发送。在回调函数中进一步设置matchData状态变量，该状态变量随后将自动重新呈现父对象和子对象。