• Как избавиться от начального значение в useState?

    Devilz_1
    @Devilz_1
    Frontend-Developer
    Добавлю к выше написанному комментарию от Вадима.

    Иногда существует надобность в том, что бы проводить какие-либо манипуляции с данными сразу после того, как мы их изменили в функции. Возьмём пример автора:

    import React, { useState } from "react";
    import "./styles.css";
    
    const View = ({ inputValues, onChangeInput }) => {
      return <input type="text" value={inputValues} onChange={onChangeInput} />;
    };
    
    const Logic = () => {
      const [inputValues, setInputValues] = useState("");
    
      const onChangeInput = e => {
        setInputValues(e.target.value);
    
        // *** Здесь мы хотим взять новые данные и что-то с ними сделать (в данный
        // момент мы просто выводим в консоль)
        console.log(inputValues);
      };
    
      return <View inputValues={inputValues} onChangeInput={onChangeInput} />;
    };
    
    export default Logic;


    *** Здесь данные устаревшие, это описал Вадим, и я с ним согласен. Но всё-таки, есть вариант использовать данные сразу после их изменения, и к сожалению в хуках этот вариант выглядит куда менее эстетичнее, нежели в классах.

    Дело в том, что в классах для изменения состояния используется setState (кэп). setState первым параметром принимает изменяемый объект, а вторым (необязательным) параметром он принимает callback, в котором можно получить уже изменившийся state. Ниже приведён пример автора, где функциональная компонента Logic переделана в одноименную классовую компоненту. Тут. При вводе символов в input, в консоли мы будем получать символы по порядку, т.е. будем видеть актуальный state

    Чтобы добиться такого же результата у автора, нужно подписаться на изменение параметра inputValues в хуке useEffect. Тут. Теперь мы так же при вводе символов в input видим актуальные данные.
    Ответ написан
    2 комментария
  • React-redux не перерисовывается компонент при изменении state?

    Devilz_1
    @Devilz_1
    Frontend-Developer
    Ваша логика здесь такая:

    Производя ввод каких-то символов, вызывается функция filterUsers, которая в свою очередь диспатчит вводимое значение в store, заменяя каждый раз параметр search. Каждый раз, когда вызывается dispatch происходит перерендер того состояния, который меняется в зависимости от диспатча. В вашем примере, вы обновляете состояние параметра search, когда параметр users сохраняет своё состояние с того момента, когда вы последний раз диспатчили его (т.е. вызывали функцию loadUsers), потому, что функция filterUsers ссылается на кейс USERTABLE_FILTER_USERS, а к кейсу, который меняет непосредственно состояние параметра users (USERSTABLE_LOAD_USERS) он не обращается.

    Попробуйте так. Решение конечно не идеально, но Вы должны увидить разницу. Замените свой кейс USERTABLE_FILTER_USERS, на тот, что внизу.

    case USERTABLE_FILTER_USERS:
                    return {
                        ...state,
                        search: action.payload,
                        users: filteredUsers(state.users)
                    }
    Ответ написан
    Комментировать
  • React-Redux загрузка данных с сервера?

    Devilz_1
    @Devilz_1
    Frontend-Developer
    import React, {Fragment} from "react"
    import { connect } from "react-redux"
    import UsersTable from "./UsersTable";
    import { loadUsers } from "../../store/UsersTable/actions";
    
    
    class UsersTableContainer extends React.Component {
    
        async componentDidMount() {
            const response = await fetch("http://www.filltext.com/?rows=500&id={index}&name={firstName}&surname={lastName}&city={city}&fullname={firstName}~{lastName}&lastloginfromip={ip}")
            const data = await response.json()
            this.props.loadUsers(data)
        }
    
        render() {
            const { users, loadUsers } = this.props
            return (
                 <Fragment>
                       {!isLoading ? (
                            <React.Fragment>
                                <UsersTable
                                    users={users}
                                    loadUsers={loadUsers}
                                />
                            </React.Fragment>
                       ) : (
                          <Preloader>
                       )}
                 </Fragment>
            )
        }
    }
    
    const setStateToProps = state => {
        return {
            users: state.userstable.users,
            isLoading: state.userstable.isLoading
        }
    }
    
    const setDispatchToProps = {
        loadUsers
    }
    
    export default connect(setStateToProps, setDispatchToProps)(UsersTableContainer)


    Попробуйте так. Вместо компоненты < Preloader > подсуньте свою "крутилку".
    Ответ написан
    2 комментария
  • Первая работа на позиции junior front end developer?

    Devilz_1
    @Devilz_1
    Frontend-Developer
    Хочу знать к чему стремиться и какой функционал нужен для сайта в портфолио что бы стать джуном


    Надо сделать что-то больше того, что делают в видосах на ютубчике с названиями "React: от джуна до первого проекта", "JS. Исчерпывающий курс", "HTML, CSS за полчаса".

    А вообще парраллельно тому, что изучаешь по разным технологиям, ходи на собесы и интервью. Самое главное не боятся, т.к. это тоже большой и, самое главное, нужный опыт. Имхо
    Ответ написан
    1 комментарий
  • Как добавить параметр в объект?

    Devilz_1
    @Devilz_1
    Frontend-Developer
    например так:

    const { title, description, price, category, sizes, color, id } = singleItem;
    
        const [chosenParameters, setParameters] = useState({ ...singleItem, size: '', color: ''});
    
        const pickSize = (size) => {
            setParameters({...chosenParameters, size: size});
        };
    
        const pickColor = (color) => {
            setParameters({...chosenParameters, color: color});
        };


    Получается делаем из параметра chosenParameters - копию объекта singleItem с дополнительными параметрами size и color. Функция pickSize вернёт эту копию с установленным параметром size, а функция pickColor, соответственно color.
    Ответ написан
    Комментировать
  • Анимация чисел на Реакт, что не так делаю?

    Devilz_1
    @Devilz_1
    Frontend-Developer
    <div className={b({ block, elem: "time-bank"})}>
                  <div className={b({ block, elem: "time"})}>
                    {secondsToClock(timer)}
                  </div>
                  <div className={b({ block, elem: "bank"})}>
                  <i className="fa fa-database" />
                  < CountUp end= { 100 }>
                         {({ countRef }) => (
                              <span ref={countRef}></span>
                          )}
                  </CountUp> 
                  &nbsp; {fund}
                  </div>
    
                </div>


    Если ещё актуально, попробуй так.
    Ответ написан
    1 комментарий
  • Как сделать так, чтобы контент двигался или уменьшался при выезжали меню?

    Devilz_1
    @Devilz_1
    Frontend-Developer
    Если меню сделано посредством JS, сделай условие, при котором если выдвигается меню, то у контента задаётся margin-left
    Ответ написан
    Комментировать