Question

我在反应项目中使用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 ，...} 五： {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 的原：阵列（0）总： 303 TOTAL_PAGES ： 31 的原：对象的

我需要将其设置为一个状态作为数组，但是当我在我的代码中设置它时，我收到此错误：对象无效作为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"));

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

我认为这个问题可能与setState电话无关。当一个对象作为子对象传递给react组件并在下面的cicumstance下调用时会发生此错误

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

即便如此，由于您在PhotoList组件中使用照片的方式，可能会发生错误。我会检查PhotoList中照片的使用情况，并确认this.props.photos未作为孩子传递给组件。

我正在使用来自NPM的unsplash-js api并做出反应

1 个答案: