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
)//...

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

如何将这些对象传递给父对象，以便我可以迭代并为示例

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

Br

Stevo

Answer 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时，这将把数据从子组件传递回父组件。希望这能有所帮助。

Answer 2

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