Question

编辑：非常愚蠢的忽略了我的时间。下次，我将更慢地阅读文档。

将数组作为prop传递，它被接受为具有相同名称的字符串。例如，如果我将usersList = ['Name1', 'Name2', 'Name3']传递给孩子，则孩子只能访问usersList作为字符串，而不能访问其内容。

尝试做const Table = ({usersList}) => {...}，const Table = (usersList)=>{...}

用于初始化数组的父级：

import React from "react";
import { connect } from "react-redux";
import Table from "../presentational/Table.jsx";

const mapStateToProps = state => {
return { users: state.users };
};

const test = ["1", "4", "5"];

const ConnectedPeople = ({ users }) => {
return (
    <ul className="list-group list-group-flush">
        {console.log(test)}
        <Table usersList="{test}" />
    </ul>
);
};

const People = connect(mapStateToProps)(ConnectedPeople);

export default People;

孩子接受它

从“反应”导入React；

const Table = usersList => {
return (
    <div>
        <pre>{Object.keys(usersList)}</pre>
    </div>
);
};

export default Table;

我假设我可以做usersList.map(...)，但它是对象，带有字符串usersList的每个字符。因此Object.keys(usersList)会呈现usersList

Answer 1

问题在于传递字符串形式的prop的方式。相反，您需要写

<Table usersList={test} />

进行了上述更改后，您可以通过映射诸如props之类的道具来简单地访问数组元素

this.props.usersList.map(...)

Answer 2

问题：

<Table usersList="{test}" />

修复：

<Table usersList={test} />

作为prop传递的数组被接受为字符串

2 个答案: