(реакция) Я получаю несколько массивов из-за функции .map (), как я могу установить состояние в одном массиве?

Question

Ребята, я немного запутался здесь, как получить один единственный массив для состояния.

Прямо сейчас, вот как я устанавливаю состояние

    componentWillMount() {
        axios.get(`api/photo-data`).then(res => {                                      
            this.setState({photoData:[res.data]})               
            this.state.photoData.map((value, idx) => (
                value.map((val, idx) => (
                    this.setState({categories:[val.field_categories]})
                ))
            ))      
        })                              
    }

, но этоэто вывод, который я получаю,

{photoData: Array(1), categories: Array(1)}

или

categories: ["Portrait"]
photoData: [Array(23)]

Так что на самом деле у меня есть внутри photoData категории, которые мне нужны, но как только я устанавливаю их внутри state.categories, они приходят наразделенный массив.

Как я могу иметь один объект или массив с категориями, а также удалить дубликаты?

спасибо

Answer 1

спасибо, ребята, я больше работал с переменными, и он работал отлично!

    componentDidMount() {
        axios.get(`https://brittdepetter.com/api/photo-data`).then(res => {                                      
           const photoData = [res.data];   
           const categoryList = res.data.map(val => val.field_categories);
           const categories = [...new Set(categoryList)];
           this.setState({ photoData, categories});
        })                              
    }

Answer 2

Чтобы сгладить массив, вы можете использовать оператор распространения при обновлении состояния. Например,

const allCategories = [...firstCategories, ...secondCategories];

, где firstCategories и secondCategories - это сами массивы. Это создаст один плоский массив.

Чтобы удалить дубликаты, вам нужно либо перебирать каждую категорию по мере их добавления и проверять, есть ли она уже в массиве, либо вы можете использовать объект Set.

const uniqueCategories = new Set(allCategories);

Чтобы превратить это обратно в массив, просто снова используйте оператор распространения ...

const uniqueCategoriesArray = [...uniqueCategories];

Answer 3

Вам больше не следует использовать componentWillMount .

Также setState является асинхронным, поэтому после выполнения setState и запроса this.state это будет не то состояние, которое вы только что установили, у вас естьиспользовать обратный вызов .

Однако;в своем коде вы можете установить состояние для фотоданных и категорий за один раз:

componentWillMount() {
  axios.get(`api/photo-data`).then(res => {
    //do you want photoData to be an array containing
    //  an array of data? why not just set photoData to res.data?
    const photoData = [res.data];
    //use res.data to map
    const nonUniqueCategories = res.data
      .map(
        val =>
          //I am assuming field_categories is an array of primitive values
          val.field_categories
      )
      .flat(); //make [[cat1,cat2],[cat1,cat4]] into [cat1,cat2,cat1,cat4]
    //get unique categories
    const categories = [...new Set(nonUniqueCategories)];
    this.setState({ photoData, categories });
  });
}

Answer 4

Это было бы правильно. И не используйте componentWillMount для побочных эффектов. Используйте componentDidMount и состояние по умолчанию с пустым массивом, например

componentWillMount() {
            axios.get(`api/photo-data`).then(res => {                                      
                this.setState({photoData:res.data})               
                this.state.photoData.map((value, idx) => (
                    value.map((val, idx) => (
                        this.setState({categories:[val.field_categories]})
                    ))
                ))      
            })                              
        }