Доброго времени суток. Вопрос связан с React, какая ошибка здесь присутствует?

Question

Моя задача состоит в том, чтобы при клике на clickMe, в property добавлялось помимо Name и SubName еще и SubNewName, значение которого указано в value, можно ли такое реализовать и если можно то как? P.S только начинаю изучать React

import React from 'react'
import { useReducer } from 'react'

export default function MenuComponents() {
    const InititalMassive = {
                Name: 'Каталог',
            SubName: 'Одежда'
    }
        const reducer = (state,action) => {
            switch (action.type) {
                case 'active':
                return { 
                    Name: 'Каталог',
                    SubName: 'Одежда',
                    SubNewName: action.value,
                }
                case 'passive':
                return {}
            }
        }
        const [property, setProperty] = useReducer(reducer, InititalMassive)
  return (
    <div className=''>
        <div className='' onClick={()=> (setProperty({type:'active', value:'Подарки'}))}>ClickMe</div>
        {property}
    </div>
  )
}

Answer 1

Моя задача состоит в том, чтобы при клике на clickMe, в property добавлялось помимо Name и SubName еще и SubNewName, значение которого указано в value, можно ли такое реализовать и если можно то как?

Назначение "редьюсера"- получив "экшон" и "значение", вернуть новый стейт. Это у тебя уже делается.

Вот только работа с тем стейтом у тебя не делается должным образом. Просто так "кинуть" на страницу js-объект... С ним нужно что-то делать дальше.

const InititalMassive = {
  Name: 'Каталог',
  SubName: 'Одежда'
}

//
function MenuComponents() {
  const reducer = (state,action) => {
    switch (action.type) {
        case 'active':
        return { 
            Name: 'Каталог',
            SubName: 'Одежда',
            SubNewName: action.value,
        }
        case 'passive':
        return {}
    }
  }
  const [property, setProperty] = React.useReducer(reducer, InititalMassive)
  const act = _ => setProperty({type:'active', value:'Подарки'})
  return (
    <div className=''>
        <div className='' onClick={act}>ClickMe</div>
        {JSON.stringify(property)}
    </div>
  )
}


const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<MenuComponents />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

Доброго времени суток. Вопрос связан с React, какая ошибка здесь присутствует?

Ответы (1 шт):