Как назначить возвращаемое значение API для состояния?

Я определил состояние с массивом и объектами внутри следующим образом.

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

Из API он возвращает мне некоторые данные в разрешении, которые я не уверен, как назначить их инициированному состоянию.

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

Я пробовал следующие строки

posts.assignee_link: res.data.assignee_link

Но этот дает мне ошибку.

Может ли кто-нибудь научить меня, как я могу назначить его?


reactjs
person user1687891    schedule 27.08.2019    source источник
comment
posts - это массив, но вы пытаетесь получить к нему доступ как к объекту. Обратитесь к этому сообщению - › stackoverflow.com/a/38742438/2845389   -  person Kaushik    schedule 27.08.2019
comment
сообщения - это массив, поэтому вы должны указать ему значение индекса при установке состояния, подобного этому posts[0].assignee_link: res.data.assignee_link   -  person Robin    schedule 27.08.2019

Ответы (2)


arrow_upward
2
arrow_downward

Если я правильно понимаю, вы хотите обновить assignee_link первого сообщения в состоянии массива posts вашего компонента с данными, возвращаемыми из вашего запроса axios.

Один из способов добиться этого будет описан ниже:

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];
    });
});
person Dacre Denny    schedule 27.08.2019

arrow_upward
2
arrow_downward

Это сработает, пожалуйста, попробуйте

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
    });
})
person Sanchit Srivastava    schedule 27.08.2019