Рендеринг вложенных компонентов из массива при изменении состояния - PullRequest
Новая
       19

Рендеринг вложенных компонентов из массива при изменении состояния

0 голосов
/ 18 мая 2018

У меня есть родительский компонент 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"
        }
    },

1 Ответ

0 голосов
/ 18 мая 2018

Я предполагаю, что вы получаете данные в 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>
        )
    }
}
...