Question

我已经定义了一个内部包含数组和对象的状态，如下所示。

constructor(props) {
    super(props);
     this.state = {
        posts: [
            {
                id: '',
                assignee_name: '',
                assignee_link: ''
            }
        ]
    }
}

从API，它以res返回了一些数据，我不确定如何将其分配给启动状态。

axios.get('http://localhost:3000/api/posts')
            .then(res  => {
                this.setState({
                    posts: res.data
                });
            })

我尝试了以下几行

posts.assignee_link: res.data.assignee_link

但是这个给了我错误。

有人可以教我如何分配它吗？

Answer 1

如果我的理解正确，您想使用axios请求返回的数据更新组件assignee_link数组状态下第一篇文章的posts。

一种实现方法如下：

axios.get('http://localhost:3000/api/posts').then(res  => {

    this.setState(prevState => {

        /* Get first post from state */
        const oldPost = prevState.posts[0];

        /* Spread old post into new post object (clone), and apply
           updated assignee_link to new cloned post */
        const newPost = { 
            ...oldPost, 
            assignee_link : res.data.assignee_link 
        };

        /* Return new array with single newPost item. This array will 
           replace the state of the component */
        return [newPost];
    });
});

Answer 2

这将起作用，请尝试

axios.get('http://localhost:3000/api/posts')
.then(res  => {
    const values = {
        id: res.data.id,
        assignee_name: res.data.assignee_name,
        assignee_link: res.data.assignee_link
    };
    this.setState({
        posts: values
    });
})

如何分配API返回值到状态？

2 个答案: