在 React Js 中使用 props 访问对象

Question

我正在尝试使用 props 作为索引来访问对象键，但它不起作用。错误：对象作为 React 子项无效（找到：具有键 {id, name, img_url, location} 的对象）。如果您打算渲染子集合，请改用数组。我是 React 的新手，所以非常感谢您的帮助。

我的代码：

class ExpandCard extends React.Component {

    render() {
        const props = this.props;
        const profiles = props.profiles;

        return(
            <>
                <div className="">
                    {profiles[props.active]}
                </div>
            </>
        );
    }
}

class App extends React.Component {
    state = {
        profiles: testData,
        active: null,
    }

    getActive = (dataFromCard) => {
        console.log('the magic number is', dataFromCard);
        this.setState({active: dataFromCard});
    }

    render() {

        return (
            <div>
                <div className="wrapper">
                    <header>
                        <div className="logo">LOGO</div>
                    </header>
                    <Form />
                    <div className="cards">
                        <div className="card-list">
                            {this.state.profiles.map(profile => <Card key={profile.id} {...profile} activeCard={this.getActive} />)}

                        </div>
                        <div className="expand-card">
                            <ExpandCard active={this.state.active} profiles={this.state.profiles} />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

它看起来像 {profiles[props.active]} return 一个看起来像这样的对象：

{ id, name, img_url, location }

你不能 return 来自 React 组件的对象，也许你是想 return {profiles[props.active].name}?

在 React Js 中使用 props 访问对象

Accesing object using props in ReactJs

object

reactjs

react-props