Реакция: Пропускает данные, не переданные дочернему компоненту - PullRequest
Новая
       6

Реакция: Пропускает данные, не переданные дочернему компоненту

0 голосов
/ 08 февраля 2020

У меня есть 2 компонента, родительский и дочерний компоненты в React. Я получаю данные из API в моем родительском компоненте и хочу передать его дочернему компоненту. Данные успешно получены, и я могу просмотреть данные в console.log (). Впоследствии данные сохраняются в состоянии родителя (это я также проверил и просматриваю в журнале консоли.

В зависимости от количества массивов в моих данных, я хочу создать соответствующее число потомков компоненты.

Первоначально я использовал эту функцию 

               {
                    this.state.tables.map((item) => (                    
                        <App data = {this.state.tables} />
                    ))
                }

, чтобы попытаться сопоставить данные с моим дочерним компонентом. Когда данные не проходили, я пытался просто пропустить массив (из моего состояние) к моему дочернему компоненту 

<App data={this.state.tables}/> //App here is my child component

, но безрезультатно. Когда я консольный журнал 

props

в моем дочернем компоненте, это то, что я получаю, данные реквизита, которые я пытался сквозной не передается 

{history: {…}, location: {…}, match: {…}, staticContext: undefined}
history: {length: 7, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …}
location: {pathname: "/table", search: "", hash: "", state: undefined, key: "bixd4p"}
match: {path: "/table", url: "/table", isExact: true, params: {…}}
staticContext: undefined
__proto__: Object

и когда я console.log (props.data) в конструкторе или componentDidMount () моего дочернего компонента, я получаю 

undefined

Почему мой Дочерний компонент не может получить доступ к данным с помощью this.props.data?

, к которому прилагается ниже, код моего родительского и дочернего компонентов для лучшей справки

Parent 

render(){
  return (
      <div>
                {
                    this.state.tables.map((item) => (                    
                        <App data = {this.state.tables} />
                    ))
                }

              <App data={this.state.tables}/>


                <Button style = {{marginTop : 80, marginRight : 30, float : "right"}} variant="contained" color="primary" onClick={() => this.addnewtable()}>
                    Add New Table
                </Button>
      </div>
  );

  }

Ребенок * 102 7 * 

constructor(props) {
        super(props)
        console.log("constructor", this.props)
        console.log("props", this.props.data)
        this.state = {
            users: [],
            message: null
        }
        this.reloadUserList = this.reloadUserList.bind(this);
    }

1 Ответ

0 голосов
/ 08 февраля 2020

Попробуйте это. 

this.state.tables.map( item => (              
   <App key = {<Some unique value>} data = {item} />
));
...