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]}返回的对象看起来像这样：

{ id, name, img_url, location }

您无法从React组件返回对象，也许您是要返回{profiles[props.active].name}？

在ReactJs中使用道具访问对象

1 个答案: