Question

FIXED：解决方案：使用this.props.name并将键值添加到

标记

我有一些常量数据，我只是想渲染到屏幕。我可以一次渲染所有数据，但我真正想要做的是搜索用户并只渲染他们的个人资料。我尝试将obj.name与this.state.name匹配使用？：声明，但它总是返回未找到。我将我的州名设置为我知道的名称在我的数据中。下面是我在顶部的整个文件和数据，因此您可以查看我目前所做的一切。

renderData有效 renderUser不起作用（试图让它工作）

import React, { Component, PropTypes } from 'react';



const tstProfileData = [
    {
        name: 'Sam', 
        email: 'smmschaefer@gmail.com',
        flavor: 'A very nice person',
        str: '50',
        agi: '55',
        int: '85',
        sta: '80'
    },

    {
        name: 'Ash', 
        email: 'ash@gmail.com',
        flavor: 'Direct person',
        str: '45',
        agi: '80',
        int: '85',
        sta: '75'
    }
]

class ProfileContainerRender extends Component {
    render() {

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

        const renderUser = this.props.data.map( (obj, idx) => {
            return ( 
                    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>not found</p>
                    )
            )
        });

        return (
            <div>
                {renderUser}
            </div>
        )
    }
}

class ProfileContainer extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'Sam'
        }
    }

    findProfile(event) {
        //TODO: create a search method to bring back a 1 user result
    }

    render() {
        return (
            <div>
                //supplying ProfileContainerRender with the data and state name set to 'Sam'
                <ProfileContainerRender data={this.props.data} name={this.state.name}/>
            </div>
        )
    }
}

ProfileContainer.PropTypes = {
    data: PropTypes.arrayOf(
        PropTypes.object
    )
}

ProfileContainer.defaultProps = {
    data: tstProfileData
}


export default ProfileContainer;

Answer 1

如果此代码是准确的，那么this.props.name === obj.name应该是name === obj.name，它指向全局名称，这是一个空字符串。

Answer 2

带有视图返回的所有表达式都应该与{}一起使用，如下所示：

 {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>not found</p>
                     }

反应搜索用户并将其呈现出来

2 个答案: