Question

我正在使用一个使用react的Spring应用程序。目前我有一个json，它包含几个基于特定条件的用户。用户数量可能会有所不同，但我想为返回的每个用户创建几个按钮，这些按钮链接到用户配置文件。网址只是＆＃39; /个人资料/用户名＆＃39;

格式的json

[{"user":{"principal":"cat@sitter.com","schedule":null,"appointments":null,"roles":["ROLE_USER"],"attributes":{"principal":"cat@sitter.com","zipcode":"98077","firstname":"cat","password":"abc123","sitterFlag":"true","ownerFlag":"false","lastname":"sitter","username":"catsitter","preferredPet":"Cat"},"momento":"cat@sitter.com"},"password":"$2a$10$ltnL.mFqo7hatj69Ls76xeegjhEX0D4At9m1rlBHbQtDrV8MdSeAS","momento":"cat@sitter.com"},{"user":{"principal":"test@pets.com","schedule":null,"appointments":null,"roles":["ROLE_USER"],"attributes":{"principal":"test@pets.com","zipcode":"98077","firstname":"test","password":"abc123","sitterFlag":"false","ownerFlag":"false","lastname":"pets","username":"testpets"},"momento":"test@pets.com"},"password":"$2a$10$wDhS6Mb8syhC0YIqgVG2qu8J6lA.1T.UprMYwAX6O7Xb3YMhgX3bO","momento":"test@pets.com"},{"user":{"principal":"test@sitter.com","schedule":null,"appointments":null,"roles":["ROLE_USER"],"attributes":{"principal":"test@sitter.com","zipCode":"98077","firstname":"test","password":"abc123","lastname":"sitter","username":"testsitter"},"momento":"test@sitter.com"},"password":"$2a$10$DuIeWFSzhtAjX3lr8xBNiu2kV9kAJ/PQ6pB/EzkB7FkGWfRbwxkzy","momento":"test@sitter.com"},{"user":{"principal":"sit@sitter.com","schedule":null,"appointments":null,"roles":["ROLE_USER"],"attributes":{"principal":"sit@sitter.com","zipCode":"98077","firstname":"sit","password":"abc123","lastname":"sitter","username":"imasitter"},"momento":"sit@sitter.com"},"password":"$2a$10$2NKOQkGZO/jUer3UjNGzdugUhkMV1pJ1eT8NQjSPRto9/cRdm56sO","momento":"sit@sitter.com"},{"user":{"principal":"a@sitter.com","schedule":null,"appointments":null,"roles":["ROLE_USER"],"attributes":{"principal":"a@sitter.com","zipCode":"98077","firstname":"a","password":"abc123","lastname":"sitter","username":"asitter"},"momento":"a@sitter.com"},"password":"$2a$10$8x1uVqR28x5rwNrydieSyu1ILifBJ5n0dUsZI5tJ6MoUWMqXxrmeq","momento":"a@sitter.com"}]

如果我为每个用户编写硬编码，我现在可以使用它了：

<div className="container padded">
    <div className="row">
        <div className="col-6 offset-md-3">
            <h2>Suggested Sitters</h2>
            <button onClick={() => this.suggestSitter(this.props.user.principal)}>Click</button>
            <hr/>
            <div>
                Sitters:
            </div>
            <Link to={this.setProfile(this.state.sitter ? this.state.sitter[1].user.attributes.username: ' ')} >
                <button type="button">{this.state.sitter ? this.state.sitter[1].user.attributes.username: ' '}</button>
            </Link>
        </div>
    </div>
</div>

setProfile的工作原理如下：

setProfile(theUser) {
    return '/profile/' + theUser;
}

点击按钮会重定向到该用户的个人资料页面。

所以基本上，我不想硬编码n个按钮，而是动态创建n个按钮，每个按钮都会链接到＆＃39; / profile / username /为每个返回的用户。

suggestSitter功能：

suggestSitter(user){
        var _this = this;
        console.log('user', user);
        axios.get('/api/user/suggest_sitter', { params: { principal: user } })
            .then(function(response) {
                console.log('Response: ' + JSON.stringify(response));
                _this.setState({
                    sitter: response
                });
            })
            .catch(function (e) {
                console.log('Error: ' + e);
            });
    }

Answer 1

您可以将数据映射到Link数组（也为其提供唯一键）：

{this.state.sitter.map((e) => (
  <Link key={e.someUniqueProperty} to={this.setProfile(e.user.attributes.username)}>
    <button type="button">{e.user.attributes.username}</button>
  </Link>
))}

Answer 2

假设您的数据是：

const data = [
  {user: {...}, attribute: {...}},
  {user: {...}, attribute: {...}},
  ...
]

现在，您可以按照以下步骤操作：

创建无状态/有状态组件（取决于您的用例）：UserButton或任何其他有意义的名称：

const UserButton = () => (
    <div className="container padded">
        <div className="row">
            <div className="col-6 offset-md-3">
                /*...Add your remaining JSX....*/
            </div>
        </div>
    </div>
)

现在，在您的父组件中（实际呈现数据的位置），您可以执行以下操作：

renderUserButtons = () => {
    return data.map((userData) => (
        <UserButton key="Some-unique-id-can-be-anything" PASS_YOUR_PROPS_HERE/>
    ))
}

render() {
    return (
        <div>
            ...
            {this.renderUserButtons()}
            ...
        </div>
    );
}

显然，您不需要多个组件，但将其拆分为更小的组件看起来更好，更易于维护且更易于测试。再次，这是我个人的偏好。您可以使用最适合您的惯例。

Answer 3

要从某个数组创建任何UI组件，您始终可以使用如下的地图功能。

JSON对象数组

let users = [{"name":"ABC"},{"name":"DEF"},{"name":"GHI"}];

地图功能

let userList = users.map((user,index)=>{return (<div>{index} - {user.name}<div>)})

这将为您提供以下输出：

0 - ABC 1 - DEF 2 - GHI

map函数中的

用户是从数组中逐个用户的引用。索引是数组中每个值的关键（例如0,1,2 ....）。

我们从return语句返回一个JSX对象。

现在可以在render＆return中使用userList变量。如下。..

render(){ let userList = "...."; return(<div>{userList}</div>

我希望这会有所帮助。

根据结果数量动态创建按钮

3 个答案:

根据结果​​数量动态创建按钮

3 个答案:

根据结果数量动态创建按钮