¿Cuál es la forma correcta de usar la matriz push en React native?
const BuilderIndicatorCard = (props) => { const [isChecked, setIsChecked] = useState(false); const [checkedValue, setCheckedValue] = useState([]); let storeCheckedValue = []; useEffect(() => { if (isChecked) { storeCheckedValue.push(props.indicator); } console.log(storeCheckedValue); }, [isChecked, checkedValue]) // const removeCheckedStrategy = (checkedValue, array) => { // var copyArray = [...array]; // var index = copyArray.indexOf(checkedValue); // if (index !== -1) { // copyArray.splice(index, 1); // setArray(copyArray); // } // } return ( <CheckBox containerStyle={styles.checkbox} size={15} textStyle={styles.name} title={props.indicator} checked={isChecked} onPress={() => {setIsChecked(!isChecked)}} /> ); };Cuando hago storeCheckedValue.push(props.indicator); ¿Por qué la matriz sigue reemplazando y no agregando?
Esto se muestra en la consola:
Array [ "Price Below MA (5)", ] Array [ "Price Below MA (7)", ] Array [ "Price Below MA (9)", ]¿Me perdí algo aquí?
Encontré una manera adecuada de resolver mi pregunta anterior. Así es como lo hice.
Yo uso el kit de herramientas redux
Crea una rebanada como:
import { createSlice } from '@reduxjs/toolkit' const addChecked = (state, action) => { state.indicator = [...state.indicator, action.payload]; } const removeChecked = (state, action) => { state.indicator = state.indicator.filter(data => data != action.payload); } // status: 'idle' | 'loading' | 'succeeded' | 'failed', export const BuilderSlice = createSlice({ name: 'Builder', initialState: { indicator: [], status: 'idle', error: null }, reducers: { addCheckedIndicator: addChecked, removeCheckedIndicator: removeChecked }, extraReducers: { } }); export const { addCheckedIndicator, removeCheckedIndicator } = BuilderSlice.actionsLuego, en el componente de la tarjeta, cambio así:
import { addCheckedIndicator, removeCheckedIndicator } from '../redux/slice/builder/BuilderSlice'; const BuilderIndicatorCard = (props) => { const dispatch = useDispatch(); const data = useSelector(state => state.Builder.indicator); const [isChecked, setIsChecked] = useState(true); const addValue = useCallback(() => { setIsChecked(!isChecked); if (isChecked) { dispatch(addCheckedIndicator(props.indicator)); } else { dispatch(removeCheckedIndicator(props.indicator)); } }, [isChecked]); return ( <CheckBox containerStyle={styles.checkbox} size={15} textStyle={styles.name} title={props.indicator} checked={props.checked} onPress={() => {addValue()}} /> ); };Despacho la función en rebanada aquí:
despacho(addCheckedIndicator(props.indicator));
despacho(removeCheckedIndicator(props.indicator));
Y luego asegúrese de usar:
const addValue = useCallback(() => { },[second]);No usarEfecto.