node.js - 我正在使用来自 NPM 的 unsplash-js api 和 React

Question

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

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

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

我需要将其设置为数组，但是当我在代码中设置它时，我收到此错误:对象作为 React 子项无效

this.setState({ photos: json });

Answer 1

尝试使用 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"));

I need to set this in a state as an array, but while i am setting this in my code i am getting this error: Objects are not valid as a React child

我认为这个问题可能与 setState 调用无关。当对象作为子对象传递给 React 组件并在以下情况下调用时会发生此错误

render() {
    const sample = {
        a: 5,
        b: 6,
        c: 7
    }
    return (
        <div>
            {sample}
        </div>
    )
}

话虽如此，错误的发生可能是由于您在 PhotoList 组件中使用照片的方式所致。我将检查 PhotoList 中照片的使用情况，并验证 this.props.photos 没有作为子组件传递给组件。