Значение не определено в родительских и дочерних компонентах, связанных вместе с React & Redux.Приложение вылетает - PullRequest
Новая
       4

Значение не определено в родительских и дочерних компонентах, связанных вместе с React & Redux.Приложение вылетает

0 голосов
/ 01 февраля 2019

Это ошибка или я не понимаю концепцию React & Redux?Мое приложение состоит из родительских и дочерних компонентов.Они связаны между собой редуксом connect.Родитель знает, что есть 12 дочерних элементов, и отображает их, но ** React действительно отображает дочерние элементы, начиная с элемента second , а не с первого.В конце он пытается отобразить элементы 12 + 2, и поэтому мое приложение вылетает с «значением элемента не определено».

Я пытался передать индекс вместо идентификатора в родительском 

map(el, i => <Fragment key={i}><Comp/></F...>

.Но приложение вылетает еще.Вот родитель и потомок с редуксом

Я решил свою проблему, просто удалив избыточность из дочернего компонента и передав от родителя напрямую к ребенку с реквизитом. 

map(el => (
    Fragment key={el.id}>
    <Child data={el} />...

Здесьis parent with redux

То, что я преследую, заключается в передаче от parent к child его идентификатора и создании дочернего элемента для рендеринга для поиска содержимого в хранилище и отображения его, как показано ниже 

#parent.js
...
list.map((el, i) => (
    Fragment key={i}>
    <Child id={el.id} />
...
//const mapStateToProps = state => ({list: state.list})

#child.js
render() {
    const { list, id } = this.props;
    console.log(list[id]);
    return (
      <div>
        <h6>{list[id].title}</h6>
...}

//const mapStateToProps = state => ({list: state.list})
#reducer.js
const initState = {
   list: [
       {id:1, title: 'aTitle}
       ...
       {id:12, title: 'aTitle}
    ]}

реагирует на 16.7.0, реагирует на редукс 6.0.0, на редуксе 4.0.1

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

1 Ответ

0 голосов
/ 01 февраля 2019

Вы передаете идентификатор дочернему компоненту.А в дочернем компоненте вы получаете список от redux и вызываете это 

<h6>{list[id].title}</h6>

, но ваш список - это массив, а не объект.Таким образом, вы передаете id от 1 ... 10

список вернет список [1], ... list [10]

1 ... 10 здесь позиция элементав массиве, а не идентификатор, который вы хотите.

Вы можете сделать это следующим образом в родительском: 

#parent.js
...
list.map((el, i) => (
    Fragment key={i}>
    <Child id={i} />
...

, поэтому я здесь позиция элемента в массиве, и он начнетсяс 0

И, конечно, здесь id потерял смысл id, лучше переименовать его как итерация или что-то еще

...