Question

我有一个React父组件，我使用graphql将我的json数据导入为传递给子组件的prop。我尝试使用state来更新页面，点击我的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>
        )
    }
}

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

1 个答案: