this.setState({}); - эта строчка получается полностью обнулила все стейты?

https://learn-reactjs.ru/home прочитаешь - поймешь все)

объект переданный в setState() просто мерджится с текущим стейтом

спасибо

https://stackblitz.com/edit/react-h2qzji вот немного изменено

подскажите пожалуйста почему undefined отображается вместо введенного значения?

подскажите пожалуйста почему undefined отображается вместо введенного значения?

1) arr берется не из this.props.arr, а из массива arr, минуя передачу в компонент 2) this.state = {names: [...this.props.data], inputValue:''}; 3) let myArr = this.state.names.map((item, index)=><div key={index}>{item}</div>)

как правильно массив прокинуть в стейты?

this.state = {names: [...this.state.data], inputValue:''};

так можно?

можно, но this.state = {names: [...this.props.data], inputValue:''};

точно спасибо

как правильно массив прокинуть в стейты?

Глянь первое правило чата

понял, учту

Я нормально обрабатываю contentEditable блоки с содержанием в виде строчки из стейта, но реакт заваливает такими предупреждениями. Это просто напрягает.

Всем привет, подскажите, пожалуйста, как правильно реализовать. Мне надо передать данные родителю, которые приходят по клику http://joxi.ru/VrwBQ3LiO5YzgA и передать их другому ребенку А вот родитель http://joxi.ru/82Qk7DgHjZvgbr

Всем привет, подскажите, пожалуйста, как правильно реализовать. Мне надо передать данные родителю, которые приходят по клику http://joxi.ru/VrwBQ3LiO5YzgA и передать их другому ребенку А вот родитель http://joxi.ru/82Qk7DgHjZvgbr

Кидай ребёнку коллбек, с помощью которого данные будут отправляться наверх. И, желательно, не удаляй/создавай Элементы, а прячь, иначе они могут потерять стейт. Но это не точно, позже затещщу.

this.setState({array:[].push(obj)}) я не правильно делаю ?)

Какую?

this.setState({array:[].push(obj)}) я не правильно делаю ?)

Concat

this.setState({array:[].push(obj)}) я не правильно делаю ?)

Прочитай что такое push

Кидай ребёнку коллбек, с помощью которого данные будут отправляться наверх. И, желательно, не удаляй/создавай Элементы, а прячь, иначе они могут потерять стейт. Но это не точно, позже затещщу.

спасибо

Подскажите, почему функция отрабатывает не по клику, а при инициализации класса?

классика новичка)

классика новичка)

)))

напиши функцию и сделай в коносоли func а потом сделай func()

Потому что функцию передать надо. А не вызывать

ааа куда пропал код знатного троля))

Подскажите, почему функция отрабатывает не по клику, а при инициализации класса?

() => func(arg)

() => func(arg)

за такое в onClick сектанты prefomance тебя порвут)

Потому что значение передаваемое в onclick вычисляется при инициализации

за такое в onClick сектанты prefomance тебя порвут)

А как лучше?

за такое в onClick сектанты prefomance тебя порвут)

Жаль не все сектанты понимают чем чреваты стрелки

А как лучше?

onClick={this.handleClick}

А если с аргументом то

Где вообще хранить тексты статей, если сайт статический и на реакте? Я слышал, что лучше разделять логику и контент, например, писать текст в markdown файлах и импортировать его. Но как тогда между параграфов вставлять другие компоненты я хз.

Жаль не все сектанты понимают чем чреваты стрелки

вот тут не понял отсылки)

А если с аргументом то

handleClick = (event) => ......

ребят, правильно ли написаны мои экшены? или их по другому оформляют? function AddDispatch(comment) { return { type: "ADD_COMMENT", payload: comment } } function DeleteDispatch(id) { return { type: "DELETE_COMMENT", payload: id } } export default (AddDispatch, DeleteDispatch);

Просто add и delete

Наверно да. Где можно почитать и ознакомится с цмсками и вообще с особенностями поделки интернет-магазинов? Нет хороших статей \ докладов на примете?

Ты там цмс хотел, кейстоун не бери, это говно

вот тут не понял отсылки)

Ну тип

@livemirsi спасибо

Ну тип

сори, перешел в режим несшядно туплю)

ребят, правильно ли написаны мои экшены? или их по другому оформляют? function AddDispatch(comment) { return { type: "ADD_COMMENT", payload: comment } } function DeleteDispatch(id) { return { type: "DELETE_COMMENT", payload: id } } export default (AddDispatch, DeleteDispatch);

ты это с неймнингом полегче, deleteComment по лучше будет смотреться для экшена)

ты это с неймнингом полегче, deleteComment по лучше будет смотреться для экшена)

тут в другом вопрос, после добавления 2ой функции, при нажатии на добавить, вызывается всегда 2ая функция

если я ее удаляю, все работает нормально, срабаывает ADD

за такое в onClick сектанты prefomance тебя порвут)

ах этот вечный спор

тут в другом вопрос, после добавления 2ой функции, при нажатии на добавить, вызывается всегда 2ая функция

наверно что в компоненте намудрил

та вроде нет submit = (event) =>{ if(!this.state.comment || !this.state.author){ alert("Заполните данные") } else { this.props.setDispatch(this.state) } } render(){ return ( <div> <button onClick={this.submit}>Comment</button> </div> ) } } const MapDispatchToProps = (dispatch) => { return { setDispatch: comment => { dispatch(AddDispatch(comment)) } } }

та вроде нет submit = (event) =>{ if(!this.state.comment || !this.state.author){ alert("Заполните данные") } else { this.props.setDispatch(this.state) } } render(){ return ( <div> <button onClick={this.submit}>Comment</button> </div> ) } } const MapDispatchToProps = (dispatch) => { return { setDispatch: comment => { dispatch(AddDispatch(comment)) } } }

бро серьезно подумай о неймнинге, у тебя с ним фигово) А акак импортируешь AddDispatch ?

бро серьезно подумай о неймнинге, у тебя с ним фигово) А акак импортируешь AddDispatch ?

import AddDispatch from './actions/action';

та вроде нет submit = (event) =>{ if(!this.state.comment || !this.state.author){ alert("Заполните данные") } else { this.props.setDispatch(this.state) } } render(){ return ( <div> <button onClick={this.submit}>Comment</button> </div> ) } } const MapDispatchToProps = (dispatch) => { return { setDispatch: comment => { dispatch(AddDispatch(comment)) } } }

setDispatch / AddDispatch ?‍♂️

import AddDispatch from './actions/action';

Не используй дефолтный экспорт

import AddDispatch from './actions/action';

если по попростому перепиши экшены в формат типа экспрешен const addComment = () => ({})

и импортируй export {addComment} from '....';

Не используй дефолтный экспорт

а как тогда?)

если по попростому перепиши экшены в формат типа экспрешен const addComment = () => ({})

commentAdd От общего к частному

а как тогда?)

Именованный

commentAdd От общего к частному

если у тебя сущность comment хорошо от делен, то весьма субьективно все это

если у тебя сущность comment хорошо от делен, то весьма субьективно все это

Пишешь add и иде тебе вываливает тысячу таких функций. addUser, addMessage, ... Vs Пишешь comment и иде вываливает все что можно делать над сущностью.

ERROR: S client not available

Пишешь add и иде тебе вываливает тысячу таких функций. addUser, addMessage, ... Vs Пишешь comment и иде вываливает все что можно делать над сущностью.

поскольку на ро нарыватся не хочу, поэтому соглашусь))))

поскольку на ро нарыватся не хочу, поэтому соглашусь))))

Тут нет места для споров. Это правило хорошего тона

Вы имеете ввиду так? const AddComment = (comment) => { return { type: "ADD_COMMENT", payload: comment } } const DeleteComment = (id) => { return { type: "DELETE_COMMENT", payload: id } } export {AddComment,DeleteComment } from './action';

Вы имеете ввиду так? const AddComment = (comment) => { return { type: "ADD_COMMENT", payload: comment } } const DeleteComment = (id) => { return { type: "DELETE_COMMENT", payload: id } } export {AddComment,DeleteComment } from './action';

Функции в camelCase ещё именуй

Вы имеете ввиду так? const AddComment = (comment) => { return { type: "ADD_COMMENT", payload: comment } } const DeleteComment = (id) => { return { type: "DELETE_COMMENT", payload: id } } export {AddComment,DeleteComment } from './action';

И вот так правильнее export const commentAdd = .... export const commentDelete = ....

import пишу так же? Import commendAdd from ...?

Вы имеете ввиду так? const AddComment = (comment) => { return { type: "ADD_COMMENT", payload: comment } } const DeleteComment = (id) => { return { type: "DELETE_COMMENT", payload: id } } export {AddComment,DeleteComment } from './action';

export from это не та конструкция, которая тебе нужна

import пишу так же? Import commendAdd from ...?

Нет. Вот так: import { commentAdd, commentDelete } from '

Нет. Вот так: import { commentAdd, commentDelete } from '

а почему нужно экспортировать таким способом каждую функцию?

а почему нужно экспортировать таким способом каждую функцию?

Тут импорт

Пишешь add и иде тебе вываливает тысячу таких функций. addUser, addMessage, ... Vs Пишешь comment и иде вываливает все что можно делать над сущностью.

так ты можешь писать "comment" в любом случае и найдёшь что commentAdd, что addComment одинаково )

А, или ты не про поиск?

так ты можешь писать "comment" в любом случае и найдёшь что commentAdd, что addComment одинаково )

Я про автосаджест

так ты можешь писать "comment" в любом случае и найдёшь что commentAdd, что addComment одинаково )

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

export const commentAdd = './action'; так?

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

Ну вообще, ты прав. Но проекты разные бывают ((

export const commentAdd = './action'; так?

Так ты экспортируешь константу с текстом

если честно то не пойму, зачем так делать) впервые такое вижу) везде писал export def

если честно то не пойму, зачем так делать) впервые такое вижу) везде писал export def

В файле может быть несколько экспортов, например функции

если честно то не пойму, зачем так делать) впервые такое вижу) везде писал export def

Default ломает именование. Ты можешь экспортировать с одним именем а импортнуть с другим. И потом даже поиск по проекту не особо поможет

правильно?

Да

Да

const addComment = (comment) => { return { type: "ADD_COMMENT", payload: comment } } const deleteComment = (id) => { return { type: "DELETE_COMMENT", payload: id } } export const commentAdd = './action'; export const deleteComment = './action';

const addComment = (comment) => { return { type: "ADD_COMMENT", payload: comment } } const deleteComment = (id) => { return { type: "DELETE_COMMENT", payload: id } } export const commentAdd = './action'; export const deleteComment = './action';

Нет

не нравится редактору такие экспорты, не пойму)

const addComment = (comment) => { return { type: "ADD_COMMENT", payload: comment } } const deleteComment = (id) => { return { type: "DELETE_COMMENT", payload: id } } export const commentAdd = './action'; export const deleteComment = './action';

export function some () {}

Вот такой синтаксис

теперь понял

Но можно и перед константой ставить