Как передать состояние в реактиве от одного класса к другому?

Question

Я создаю веб-приложение с React с использованием классов ES6. У меня есть файл IndexPage.js, который добавляет данные в базу данных и файл AdminLandingPage.js, который считывает все данные, находящиеся в настоящее время в базе данных в своей функции componentDidMount().

В основном оба работают отдельно. Я хочу, чтобы иметь возможность сохранять данные в состоянии (массиве) в IndexPage, а затем передать это состояние другому файлу, где я могу проверить, есть ли в нем массив данных и установить состояние таблицы (что позволяет мне не нужно обновлять страницу).

IndexPage имеет это в это конструктор:

constructor(props) { 
    super(props); 

    this.state = {newbugs: []}; 
} 

Здесь я добавляю данные в базу данных и установка состояния массива newbugs:

addBug = (newBug) => { 
    BugsApi.addBugData(newBug, data => { 
    this.setState({newbugs: data}) 
    }) 
} 

В моей AdminLandingPage конструктор у меня есть:

constructor(props) { 
    super(props); 

    this.state = {bugs: []}; 
} 

И функция componentDidMount(), где я читаю все данные curre ntly в базе:

componentDidMount() { 

    BugsApi.getBugData(data => { 
     this.setState({bugs: data}) 
    }) 
} 

^Здесь я хотел бы передать в newbugs состояния массива из моего чека IndexPage, если у него есть данные в нем, а затем обновить ошибки состояния массива в этом классе.

Сообщите мне, если я могу быть более ясным с моим вопросом. Я застрял часами на этом сейчас. Благодаря!

Answer 1

state должно быть передано между компонентами как props. Например:

class IndexPage extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {newbugs: []}; 
    } 

    ... 

    render() { 
    return (
     <AdminLandingPage bugs={this.state.newBugs}/> 
    ) 
    } 
} 

class AdminLandingPage extends React.Component { 

    ... 

    componentDidMount() { 
    // `newBugs`constant holds the bugs passed down from IndexPage 
    const newBugs = this.props.bugs; 
    BugsApi.getBugData(data => { 
     this.setState({bugs: data}) 
    }) 
    } 

    ... 
} 

Здесь IndexPage проходит state.newBugs вниз к его дочерний компонент AdminIndexPage как bugs опора

Answer 2

я в основном согласен с кодом, который был предоставлен на Red Mercury, за исключением затем установить состояние внутри вашей AdminLandingPage. После того, как реквизит доступен внутри компонента, вам не понадобится состояние в компоненте AdminLandingPage, если только что-то еще вы не пытаетесь сделать, о котором не упоминалось.

class IndexPage extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {newbugs: []}; 
    } 

    render() { 
    return (
     <AdminLandingPage bugs={this.state.newBugs}/> 
    ); 
    } 
} 

const AdminLandingPage = (props) { 
    console.log(props.bugs); 
    return (
    ... 
); 
}