Question

它是一个错误或我不理解阵营＆Redux的概念？我的应用程序由父级和子级组件组成。它们通过redux connect捆绑在一起。父级知道有12个子元素并将其映射，但是**反应确实从 second 元素而不是第一个元素开始映射子元素。最后，它尝试映射12 + 2元素，而我的应用程序因“元素的值未定义”而崩溃。

我试图在父级中传递索引而不是id

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

。但是该应用确实崩溃了。这是parent and child with redux

我解决了我的问题，只需从子组件中删除redux并通过props将父对象直接传递给子对象即可。

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

这里是parent with redux

我追求的是将父代的ID传递给孩子，并让其在渲染器中查找商店内的内容并将其显示如下

#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

如何做是正确的，为什么用Redux的数量从2反应？

Answer 1

您将一个ID传递给Child组件。在子组件中，您将从redux获取列表，并将其命名为

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

但是您的列表是一个数组而不是一个对象。所以您从1 ... 10传递ID

列表将返回列表[1]，...列表[10]

1 ... 10这是元素在数组中的位置，而不是您想要的id。

您可以在父级中这样做：

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

所以我在这里是元素在数组中的位置，它将从0开始

当然，这里的id失去了id的意义，最好将其重命名为iterate之类的东西

的值是与阵营＆Redux的连接在一起的父 - 子组件未定义。应用程序崩溃

1 个答案: