Node.js 我正在使用NPM中的unsplash js api和react

我在我的react项目中使用unsplash js，当我使用搜索查询获取一些随机照片时，我会得到下面JSON检查形式的返回

{total: 303, total_pages: 31, results: Array(10)}

结果 : 阵列（10） 0 : {id:“nitdfruLYys”，创建于：“2016-10-12T13:04:23-04:00”，更新于：“2017-08-02T04:08:11-04:00”，宽：4000，高：6000，} 1. : {id:“XE87arvN3oo”，创建于：“2015-12-12T11:43:35-05:00”，更新于：“2017-08-02T12:08:22-04:00”，宽：4272，高：2848，} 2. : {id:“iS0Aq3QPsJ4”，创建于：“2016-02-26T19:51:15-05:00”，更新于：“2017-08-02T16:36:55-04:00”，宽：3000，高：1691，} 3. : {id:“41ExcluchVHI”，创建于：“2017-07-15T20:50:43-04:00”，更新于：“2017-08-02T14:31:32-04:00”，宽：4608，高：3072，} 4. : {id:“EjlygRQAOik”，创建于：“2017-02-07T19:59:18-05:00”，更新于：“2017-08-02T00:30:17-04:00”，宽：5000，高：3333，} 5. : {id:“WicMLrOSVvY”，创建于：“2015-10-24T13:40:06-04:00”，更新于：“2017-07-31T07:00:30-04:00”，宽：3456，高：2304，…} 6. : {id:“Fu8pblIzEL0”，创建于：“2015-03-06T16:49:09-05:00”，更新于：“2017-08-01T20:41:35-04:00”，宽：4928，高：3264，} 7. : {id:“D9XX3Cjoh2s”，创建于：“2016-02-21T15:45:25-05:00”，更新于：“2017-08-02T20:44:56-04:00”，宽：6000，高：4000，} 8. : {id:“AKA2X4PH0”，创建于：“2016-01-21T03:42:02-05:00”，更新于：“2017-07-28810:24:12-04:00”，宽：5616，高：3744，} 9 : {id:“E-1tnSNP0y4”，创建于：“2015-11-08T19:32:31-05:00”，更新于：“2017-07-30T17:19:06-04:00”，宽：5472，高：3648，} 长度 : 10 proto : 数组（0） 全部的 : 303 总页数 : 31 proto : 反对

我需要在状态中将其设置为数组，但当我在代码中设置此项时，我遇到了以下错误：对象作为子对象无效

---

this.setState（{photos:json}）

尝试使用

componentDidMount

生命周期方法重构代码

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { photos: [] };
    }

    componentDidMount() {
        // make API calls here

        this.setState({ photos });
    }

    render() {
        return (
            <div>
                <SearchBar />
                <PhotoList photos={this.state.photos} />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

---

也就是说，错误可能是由于您如何使用

PhotoList

组件中的照片造成的。我将检查

照片列表中照片的使用情况

，并验证

此.props.photos

未作为子组件传递给组件。

尝试使用

组件安装

生命周期方法重构代码

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { photos: [] };
    }

    componentDidMount() {
        // make API calls here

        this.setState({ photos });
    }

    render() {
        return (
            <div>
                <SearchBar />
                <PhotoList photos={this.state.photos} />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

---

也就是说，错误可能是由于您如何使用

PhotoList

组件中的照片造成的。我会检查

PhotoList

中照片的使用情况，并验证

this.props.photos

是否未作为子级传递给组件。

您是否可以发布相关react-code的片段您是否发布了相关react-code的片段使用了您的方法但仍显示了错误--对象作为react-child无效（发现：对象的键为{id，created_at，updated_at，width，height，color，likes，liked_by_user，description，user，current_user_collections，url，categories，links}）

code

componentDidMount（）{//在此处进行API调用unslash.search.photos（“dogs”，1）。然后（toJson）。然后（json=>{//console.log（json.results）；this.setState（{photos:json.results}）}；}谢谢你的帮助：）随时兄弟，如果你想点击向上投票按钮，我不会生气；）使用了你的方法，但仍然显示错误——对象作为React子对象无效（找到：带有键的对象）{id，创建，更新，宽度，高度，颜色，喜欢，喜欢，喜欢用户，描述，用户，当前用户集合，URL，类别，链接}）

code

componentDidMount（）{//make-API调用这里unsplash.search.photos（“dogs”，1）。然后（toJson）。然后（json=>{//console.log（json.results）；this.setState（{photos:json.results}）；}谢谢你的帮助：）任何时候，兄弟，如果你想点击向上投票按钮，我不会为此生气；）