Question

我有一个对象数组和一个搜索功能。搜索功能接受用户名并将其传递给配置文件呈现组件，该组件查找用户名并返回其数据。我现在的问题是，我使用条件if块来搜索数组并返回结果。这会导致任何超过数组中[0]点的用户配置文件都有额外的

标记，从而导致额外的间距。

有没有办法可以循环遍历数组并只返回我想要的1？我假设我可能需要制作一个处理1个真实回报的变量，然后才返回。

这是我到目前为止所拥有的。

const renderUser = this.props.data.map( (obj, idx) => {
                    return ( 
                            this.props.name === obj.name ? 
                                <p key={idx}>
                                        Name: {obj.name} < br/>
                                        Email: {obj.email} <br />
                                        Flavor: {obj.flavor} <br />
                                        STR: {obj.str} <br />
                                        AGI: {obj.agi} <br />
                                        INT: {obj.int} <br />
                                        STA: {obj.sta} <br />
                                    </p>
                                 :
                                <p key={idx}> </p>                   
                    )
                });

我可以通过添加一个var来处理数据来清理它，但这会导致数组中的每个元素都需要一个键错误。

const renOneUser = this.props.data.map(( obj, idx ) => {
                    let userData;

                            this.props.name === obj.name ? 
                             userData =  <p key={idx}>
                                        Name: {obj.name} < br/>
                                        Email: {obj.email} <br />
                                        Flavor: {obj.flavor} <br />
                                        STR: {obj.str} <br />
                                        AGI: {obj.agi} <br />
                                        INT: {obj.int} <br />
                                        STA: {obj.sta} <br />
                                    </p>
                                 :
                                <p key={idx}> </p>       

                    return (
                        <div>
                            {userData}
                        </div>
                    )        
                });

Answer 1

您可以使用filter函数按条件过滤，然后通过map函数传递结果：

this.props.data.filter(obj => {
      return this.props.name === obj.name;
    }).map((obj, idx) => {
        return (
            <p key={idx}>
                        Name: {obj.name} < br/>
                        Email: {obj.email} <br />
                        Flavor: {obj.flavor} <br />
                        STR: {obj.str} <br />
                        AGI: {obj.agi} <br />
                        INT: {obj.int} <br />
                        STA: {obj.sta} <br />
            </p>
        );
    });

React从对象数组返回1个对象

1 个答案: