• Как правильно добавлять в массив состояния новые данные?

    @AlexKindGeek
    2 варианта
    с Object.assign()
    const reducer = (state = initialState, action) => {
      switch (action.type) {
        case USER_LOG:
          return Object.assign({}, state, {
          	name: action.payload.name,
            rating: [...state.data.rating, action.payload.rating]
          })
        default: return state;
      }
    };

    Spread
    const reducer = (state = initialState, action) => {
      switch (action.type) {
        case USER_LOG:
          return {
          	...state,
            name: action.payload.name,
            rating: [...state.data.rating, action.payload.rating]
          }
        default: return state;
      }
    };



    Пример initialState, если тяжело хранить в памяти, создавайте коменты
    const initialState = {
      data: {
      	name: 'Name',
            rating: ["10", "9.1"]
      },
    };
    Ответ написан
    Комментировать
  • Как быстро взять последний элемент в массиве?

    longclaps
    @longclaps
    Хотите удобства - пользуйтесь библиотечкой lodash:
    var x = _.last([1, 2, 3]);
    там много плюшек.
    Ответ написан
    Комментировать
  • Как быстро взять последний элемент в массиве?

    rockon404
    @rockon404
    Frontend Developer
    Метод здорового человека:
    const lastElement = array[array.length - 1];

    Методы курильщика:
    const lastElement = [...array].pop();

    const lastElement = array.slice(-1).pop();

    const lastElement = array.slice(-1)[0];

    Если надо не просто обратиться к последнему элементу, а при этом удалить его из массива:
    const lastElement = array.pop();
    Ответ написан
    23 комментария
  • Почему не срабатывает async?

    rockon404
    @rockon404
    Frontend Developer
    А с чего вы решили, что асинхронная функция должна возвращать Promise без вызова?
    Будет работать либо так:
    const handleFiles = () => {
      return async handle => {
        let result;
        result = 'hello';
        return result;
      };
    };
    handleFiles()().then(result => console.log(result)).catch(console.log(e));

    либо так:
    const handleFiles = async () => {
      let result;
      result = 'hello';
      return result;
    };
    
    handleFiles().then(result => console.log(result)).catch(console.log(e));


    Складывается впечатление, что вы видели где-то асинхронные действия redux-trunk и даже писали, но толком не понимаете как они работают и зачем над асинхронной функцией обертка. Дело в том, что там вы передаете в dispatch вызов action и middleware получает возвращаемую функцию, а затем ее вызывает.
    Ответ написан
    Комментировать
  • Почему возвращает undefined а state?

    rockon404
    @rockon404 Куратор тега Redux
    Frontend Developer
    const mapStateToProps = state => ({
      user: state.users.user,
    });


    Тут у вас какая-то ерунда:
    return {
       ...state,
      user: state.user.concat({
        surname: action.surname,
        name: action.name,
        patronymic: action.patronymic,
        phone: action.phone,
        isLoggingIn: action.isLoggingIn
      })
    };


    Вы что вообще тут сделать хотите?
    Ответ написан
  • Как мне вернуть правильный result?

    alexey_bille
    @alexey_bille
    Web developer
    Попробуйте так
    docRef.get().then((doc) => {
          if (doc.exists) {
              result = 'Такой номер уже есть';
              console.log('Такой номер уже есть');
          }else{
              db.collection('users').doc(user.phone).set(user);
              result = true;
              console.log(true);
          }
          }).catch((error) => {
              result = 'Произошла ошибка';
              console.log('Произошла ошибка');
          });
    Ответ написан
    6 комментариев
  • Как мне вернуть правильный result?

    @SeaBreeze876
    Front-end разработчик
    import {ADD_USER} from './actionTypes';
    import {HELLO} from './actionTypes';
    import firebase from 'react-native-firebase';
    
    export const addUser = (surname, name, patronymic, phone) => {
        return async dispatch => {
            let db = firebase.firestore();
            let user = {
                surname: surname,
                name: name,
                patronymic: patronymic,
                phone: phone,
            };
            let result = 'начальный';
            let docRef = db.collection('users').doc(user.phone);
            try {
                let doc = await docRef.get()
                if (doc.exists) {
                    result = 'Такой номер уже есть';
                    console.log('Такой номер уже есть');
                } else {
                    db.collection('users').doc(user.phone).set(user);
                    result = true;
                    console.log(true);
                }
            } catch (e) {
                result = 'Произошла ошибка';
                console.log('Произошла ошибка');
            }
            return result;
        };
    };


    let result = this.props.onAddUser(
        this.state.controls.surname.value,
        this.state.controls.name.value,
        this.state.controls.patronymic.value,
        this.state.controls.phone.value,
    ).then(result => console.log(result))
    Ответ написан
    Комментировать
  • Почему я добавляю в .gitignore файлы, а их все равно отслеживает?

    tigroid3
    @tigroid3
    PHP, YII2, SQL, Postgres, Docker, SPHINX, GIT
    1. удали гит игнор, сделай коммит
    2. удали файлы и коммит
    3. добавь gitignore и заливай уже что надо, так точно заработает
    Ответ написан
    Комментировать
  • Почему я добавляю в .gitignore файлы, а их все равно отслеживает?

    JimmDiGreez
    @JimmDiGreez
    Full-stack Developer
    Потому что они уже были в индексе.
    https://git-scm.com/docs/git-rm#git-rm---cached
    git rm --cached
    позволяет убрать файлы из индекса, соответственно гитигнор на них подействует.

    git rm -rf --cached ios/build например.
    Поясню.
    -r - рекурсивно пройтись по заданому каталогу.
    -f - чтоб не ругался ни на что.
    Запись -rf дозволена соглашениями.
    --cached - удаление только из индекса (не самих файлов).
    ios/build - пусть к папке, в которой эту экзекуцию провести. (можно так же полный путь записать)

    package-lock.json кстати оставь.
    Ответ написан
    7 комментариев
  • Что означает запись ...state?

    SvyatYa
    @SvyatYa
    FrontEnd developer
    https://developer.mozilla.org/ru/docs/Web/JavaScri...

    Здесь берётся текущий стэйт, деструктиризируется в объекте, а остальные поля, значения которых указываются в этом объекте обновляются.
    То есть возвращается в результате новый state с обновленным полем.
    Ответ написан
    Комментировать
  • Что означает пропись в консоле sudo?

    Запуск последующей команды в привилегированном режиме суперпользователя. Некоторая ограничивающая политика работы системы предотвращает нарушение работы важных компонентов, что в свою очередь обеспечивает некую безопасность. При разграничении уровней доступа можно не бояться повреждения системы, но для этого необходимо знать важные моменты работы систем пакетов и контроля над источниками. С одной стороны локально это может и полезно, но с другой если в систему добавить заведомо уязвимые источники, то при такой конфигурации можно будет установить любое ПО санкционировано. sudo полезная команда для настройки системы, но крайне неудобная для пользовательских действий внутри пользовательского окружения. Как то так.
    Ответ написан
    Комментировать
  • Как по клику узнать ключ?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Зачем вам ключ? Передавайте сам элемент:
    сlick(e, item) {
      console.log(item);
    }
    
    render() {
        const { array } = this.state;
        const unit = array.map((item, index) => (
          <a 
            key={index}
            style={{display:"block"}}
            onClick={(e) => this.click(e, item)}
          >
            Hello, {item}
          </a>
         ));


    Если все-таки нужен именно ключ, то просто добавьте еще один аргумент в вызов click.
    Ответ написан
    3 комментария
  • Как решить проблему в React.js c checkbox?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Причина бага в том, что вы рендерите списки моделей через map и передаете в key индекс, а индекс в вашем случае всегда равен 0. Само решение показывать списки таким способом очень плохое.
    Как можно переделать. Во-первых использовать для mark не массив, а строку. Использование массива для значения mark необоснованно. Во-вторых все модели автомобилей с фильтров хранить в объекте вида:
    const allCars = {
      bmw: [
        { name: 'x1',  ... },
         ...
      ],
      ...
    }

    Тогда:
    render() {
      const { mark } = this.props;
      const models = allCars[mark]; 
      
      return (
        <div>
          {mark && (
            <div>
              <label>{mark}</label>
              {models.map(model => (
                <div key={model.name}>
                  <label>{model.name}</label>
                  <input
                    name="model"
                    value={model.name}
                    type="checkbox"
                    onClick={this.props.changemodel}
                  />
                </div>
              ))}
            <div>
          )}
        </div>
      );
    }

    Менять состояние так как это делаете вы нельзя, так как вызов setState асинхронный. Например код метода changeMark можно переписать так:
    changeMark (e) {
      const { value } = e.target;
    
      this.setState({ 
        mark: value === 'all' ? [] : [...prevState.mark, value],
        model: [],
        page: 1,
      });
      }
    }

    Для изменения состояния на основе предыдущего передавайте в setState функцию возвращающую состояние, на момент вызова первым аргументом(prevState в примере) в нее придет текущее состояние компонента.

    Для переменных значение которых не переопределяется правильней использовать const, а не let.

    Хандлеры changeBody и changeModel можно объединить в один, а использовав xor из lodash сократить до такого вида:
    handleCheckboxCheck(e) {
        const { name, value } = e.target;
    
        this.setState(prevState => ({
          [name]: _.xor(prevState[name], +value), 
        }));
    }


    Черную магию с array.push и array.length = 0 для обновления состояния, забудьте и никогда не вспоминайте.

    Метод render это самое худшее место для бинда хандлера. Антипатерн. Так можно делать только если надо передать аргументы.
    Вместо этого бинд лучше сделать в конструкторе:
    constructor(props) {
      super(props);
      this.changeModel = this.changeModel.bind(this);
    }

    Либо переписав хандлер с метода класса в поле класса:
    метод класса:
    changeModel (e) {
        // some actions
    }

    поле класса:
    changeModel = e => {
      // some actions
    };
    Ответ написан
  • Не могу разобраться в коротком коде?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Судя по коду речь идет про тестирование.
    Вы описываете callback внутри функции beforeEach.
    Callback - это функция, которая будет вызвана в какой-то момент, задуманный автором, следовательно автором же задумано, что внутрь этого "коллбэка" будет передан аргумент - еще одна функция. Вы ее назвали done (так как, все так называют, но вместо done, можно было написать qwe и то же бы работало).

    Resolve и reject - это названия (так же придуманные для удобства) функций, которые вы передаете в then:

    beforeEach((done) => {
      Todo.remove({}).then(() => {
        return Todo.insertMany(todos);
      }).then(resolve, reject);
    });


    Получается, что ваш resolve - это первый аргумент, то есть анонимная функция, первая в then, то есть:
    () => done()
    Функции reject - здесь нет, как нет и функции catch.

    Пример, про qwe:
    beforeEach((qwe) => {
      Todo.remove({}).then(() => {
        return Todo.insertMany(todos);
      }).then(() => qwe());
    });


    https://learn.javascript.ru/promise
    Ответ написан
    3 комментария
  • Как задержать выполнение setInterval?

    @mukoladerevlo
    веб-разработка, электроника
    если я правильно понял, то вам нужен типа reboot для интервала.
    можно вот так
    var slider = document.querySelectorAll("article");
      var circleone = document.getElementById("circle-one");
      var circletwo = document.getElementById("circle-two");
    var interval;
    function Run(){
     clearInterval(interval);
     interval = setInterval(function() {
      			for(var i = 0; i < slider.length; i++){
            	var item = parseInt(slider[i].style.left);
            	if(item === 0){
              	item = 100;
              	slider[i].style.transitionDuration = "0s";
              	slider[i].style.left = item + "%";
            	}else{
              	item-=100;
              	slider[i].style.transitionDuration = "0.5s";
              	slider[i].style.left = item + "%";
            	}       
        	}
      }, 4000);
    }
    Run(); 
      circleone.onclick = function(){
        slider[0].style.left = 0 + "%";
        slider[1].style.left = 100 + "%";
        
       Run();
      }
    Ответ написан
    Комментировать
  • Откуда возникает прокрутка при адаптации?

    @Shinso
    Ты задал одновременно ширину 100% и margin-left для .language и .item-menu
    При адаптиве или убирай margin-left или сразу задавай этот отступ с помощью padding
    Ответ написан
    Комментировать
  • Как мне сделать что бы работало defaultValue при изменении state?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Нет никаких defaultValue у select.
    Если вам нужно сделать какое-то значение в select выбранным по умолчанию, то просто укажите value у тэга <select>

    документация
    Ответ написан
    1 комментарий
  • Npm install флаг --save, как работает?

    @SaXXuM
    Без этого флага просто установится пакет, в package.json ничего не добавится.
    Ответ написан
    3 комментария