Первый элемент массива пустой, во втором первый элемент и так дальше, как поправить?

Question

[GF-user]

export const ContentContext = React.createContext()
export const arrCart = []
//Есть компонент родитель Content
function Content() {
let [cart, setCart] = useState([])
function addCart() {
    arrCart.push(cart)
    // console.log(typeof arrCart, arrCart)
  }
return (
    <ContentContext.Provider value={{cart, setCart, addCart}}>
    <div className={styles.content}>
        <Goods />
        <Cart />
    </div>
    </ContentContext.Provider>
  );
}
//Компонент Goods он выводит товары которые можно добавить в корзину
function Goods() {
const {setCart} = React.useContext(ContentContext)
return (
// Код который выводит товары на страницу
//Кнопка которая должна добавлять в корзину()
<button onClick={()=> { addCart() return setCart(roll)}} className={styles.btn__add} type='button'>Add</button>
//Компонент Cart сюда я должен получать массив
import { arrCart } from '../Content';
function Cart() {
console.log(arrCart)
return ()
}

Ошибся исправил, теперь выводит мне массив добавляет, но первый элемент он добавляет пустой со второго добавляет первый и так дальше.

Comments

[szQocks]

Исправь свой вопрос, ничего не понятно, что за выбор, что за товар

толи ты не знаешь жизненный цикл компонента и удивляешься почему у тебя каждый раз arrCart создаётся при вызове setCart - непонятно, тут гадать только

[GF-user]

szQocks Ошибся в одном моменте все добавляет теперь, обновил код посмотрите на него, сейчас проблема в том при нажатие кнопки добавить, первый элемент пустой, во второй он добавляет первый элемент и так дальше, как это можно поправить?

[szQocks]

снова исправляй вопрос,

function addCart() {
    arrCart.push(cart) 
  }

[GF-user]

szQocks, Дело в этой функции?

[szQocks]

GF-user, посмотри на функцию, и скажи что она делает ?

[GF-user]

Функция добавляет элемент в массив, я обновил код на странице посмотрите есть массив arrCart, я его экспортирую в компонент Cart

[szQocks]

GF-user, а ну да) вхахаха, вот я туплю, ща гляну что ты там написал)

[szQocks]

GF-user, когда та вызываешь фукнцию onClick={()=> { addCart() return setCart(roll)}}

сначала у тебя отрабатывает addCart синхронная функция что она делает - добавляет в массив cart а cart по дефолту это пустой массив, поэтому сначала добавляется пустота

потом отрабатывает setCart - вызов обновления стейт асинхронный, и когда то там после все синхонных операция он обновит cart и добавит туда какой-то roll

грубо говоря всё работает так как ты и написал и не советую вообще создавать какие-то массивы и манипулировать ими и экспортировать их туда сюда, ты создал контекст вот и пользуйся им

import { arrCart } from '../Content'; // за место импорта - пользуйся контекстом , если твой компонент Cart находится внутри контекста 
function Cart() {
console.log(arrCart)
return ()
}

вообще я даже на практике не делал такого что бы создать какой-то стейт тип массива и внутри компонентов им манипулировать как-то, это очень плохая практика так как для этого есть возможность - поднятия состояния, контексты, сторы

[szQocks]

GF-user, ну кароче если коротко, то всё работает как как ты написал, сначала добавляешь, потом обновляешь

[GF-user]

szQocks, Как мне сделать эту последовательность? Что то не много я не понял) я поменял местами setCart(roll) и addCart()

[szQocks]

GF-user, так не будет работать так как setCart будет отрабатывать после addCart в любом случае

export const ContentContext = React.createContext()
export const arrCart = []
//Есть компонент родитель Content
function Content() {
let [cart, setCart] = useState([])
function addCart(roll) {
    arrCart.push(roll)
    // console.log(typeof arrCart, arrCart)
  }
return (
    <ContentContext.Provider value={{cart, setCart, addCart}}>
    <div className={styles.content}>
        <Goods />
        <Cart />
    </div>
    </ContentContext.Provider>
  );
}
//Компонент Goods он выводит товары которые можно добавить в корзину
function Goods() {
const {setCart} = React.useContext(ContentContext)
return (
// Код который выводит товары на страницу
//Кнопка которая должна добавлять в корзину()
<button onClick={()=> { addCart(roll) return setCart(roll)}} className={styles.btn__add} type='button'>Add</button>
//Компонент Cart сюда я должен получать массив
import { arrCart } from '../Content';
function Cart() {
console.log(arrCart)
return ()
}

[GF-user]

szQocks,

<button onClick={()=> { setCart(roll) 
                            return addCart()
}} className={styles.btn__add} type='button'>Add</button>

Так не получиться

[GF-user]

szQocks, Убрав функцию addCart и заменил на useEffect

useEffect(()=>{
    arrCart.push(cart)
  }, [cart])

Теперь добавляются элементы нормально но начиная с 2 элемента, нулевой и первый у меня undefined теперь нужно это сейчас решить

[szQocks]

GF-user, я уже отправил тебе код который ты хочешь, а так же советую бросить эту идеи с импортом массива туда сюда и в данной ситуации юзать контекст

[GF-user]

szQocks, Попробую избавиться от импорта, спасибо тебе большое!

Answer 1

[AUser0]

А что, этот код выполняется при каждом добавлении чего-то куда-то? Вот это вот обнуление arrCart, и потом добавление нового элемента в пустой массив, да?

Comments

[GF-user]

AUser0 Ошибся в одном моменте все добавляет теперь, обновил код посмотрите на него, сейчас проблема в том при нажатие кнопки добавить, первый элемент пустой, во второй он добавляет первый элемент и так дальше, как это можно поправить?