在状态更改时从数组渲染嵌套组件

Question

我有一个 React 父组件，我正在使用 graphql 导入我的 json 数据作为要传递给子组件的道具。我正在尝试使用状态来使用我的 json 文件中的三个对象之一来更新点击页面。

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

    this.state = {
        data: []
    }
}
componentDidMount(){
    this.setState({data: data.dataJson[0]})
    console.log(data.dataJson[0])

}
showPsContent() {
    this.setState({data: data.dataJson[1]})
}
render() {
    console.log(this.props)
    const {data} = this.props
    console.log(data)
    console.log(this.props.data)
    return (
        <div id='work'>
            <NavBar/>
                <div className='work-content'>
                    <div className="side-nav">
                        <button onClick={() => 
     this.showContent(index)}></button>
                    </div>
                    <h1 className="work-header"></h1>
                    <Page data={this.state.data}/>
                    </div>
            </div>
        )
   }
}    

我需要通过索引号将数据传递给我的其他组件，以便我可以映射它们。

或者我应该通过存储它并根据索引更改状态来映射父数组中的数组。

我的数据如下所示：

{
"workpages": [{
        "title": "Escobar",
        "body": "is a registered 501(c)3 non-profit",
        "link": "https://excaliber.org",
        "mission": "https://excaliber.org/about#mission",
        "extab": {
            "label": "Summary",
            "text": "sie empre morter fybes losic masiknd" 
        }
    },
    {
        "title": "General Assembly",
        "body": "sie empre morter fybes losic masiknd",
        "link": "https://excaliber.org",
        "mission": "https://excaliber.org/about#mission",
        "extab": {
            "label": "Summary",
            "text": "sie empre morter fybes losic masiknd"
        }
    },

Answer 1

我假设您在 componentDidMount 中获取数据。之后，您可以将当前页码/索引存储在状态中，并在单击按钮时增加/更改它。因此，当您增加/更改页面索引时，组件将重新渲染子组件，并且一切正常。你的组件可以这样写：

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

        this.state = {
            data: [],
            currentPageIndex: 0
        }
    }
    componentDidMount() {
        // getting data somehow
        this.setState({data: jsonData});
    }

    showContent() {
        const nextIndex = this.state.currentPageIndex === this.state.data.length ? 0 : this.state.currentPageIndex + 1;
        this.setState({currentPageIndex: nextIndex});
    }

    render() {
        const {data, currentPageIndex} = this.state;
        return (
            <div id='work'>
                <NavBar />
                <div className='work-content'>
                    <div className="side-nav">
                        <button onClick={this.showContent}></button>
                    </div>
                    <h1 className="work-header"></h1>
                    <Page data={data ? data[currentPageIndex] : null} />
                </div>
            </div>
        )
    }
}