Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (4)

Лучшие ответы пользователя

Все ответы (9)
  • Reducer вызывается по 2 раза в useReducer?

    @paoluccio
    switch (action.type) {
      // ...
      case 'checked':
        return state.map(item => {
          if (item.id === action.id) {
            return { ...item, checked: !item.checked };
          }
          return item;
        });
      // ...
    }
    Ответ написан
    7 комментариев
  • Можно ли хуки вынести в отдельную функцию. И если нет, то как быть?

    @paoluccio
    И пытаюсь вызвать ее из pushForm()

    это против правил, хуки должны жить на верхнем уровне в компонентах или же других(кастомных) хуках.

    В вашем случае, как один из вариантов, логику обработки формы можно вынести в кастомный хук. Затем использовать его в LoginUser.
    Приблизительная структура:
    // Custom hook
    export const useAuthHandler = () => {
      const [token, setToken] = useState(null);
    
      useEffect(() => {
        if (token) { // чтобы не диспатчить с начальным null на первом рендере
          // диспатчим экшн с полученным токеном
        }
      }, [token]); // будет следить за token
    
      return () => { // возвращаем функцию-обработчик
        // запрашиваем токен, в then вызываем setToken(token)
      };
    };
    
    // Component
    export default function LoginUser() {
      const handleSubmit = useAuthHandler();
    
      return (
        <div>
          <form id="auth_form">
            {/* ... */}
            <Button autofocus="true" onClick={handleSubmit}>Авторизоваться</Button>
          </form>
        </div>
      );
    };
    Ответ написан
    Комментировать
  • Почему редюсер вызывается два раза?

    @paoluccio
    но при создании функции отметки дела галочкой...

    у вас там ошибка, вы мутируете todo, что не есть хорошо...

    Должно быть:
    export const todoReducer = (state, action) => {
      switch (action.type) {
        // ...
        case "MARK_TODO":
          const newState = state.map(todo => {
            if (todo.id === action.id) {
              return { ...todo, status: !todo.status };
            }
            return todo;
          });
          return newState;
        // ...
      }
    };


    ...запускается будто "из воздуха".

    Будто любое действие кроме 'ADD_TODO' заранее проклято.


    Имя злодею - Strict Mode. Почитать можно тут.

    Если сильно раздражает - идёте в index.js и убираете обёртку над <App />.
    Ответ написан
    1 комментарий
  • React: Как перебросит данные из объекта на другой компонент?

    @paoluccio
    Можно поместить data в контекст, ну и обращаться где захочется с помощью useContext.

    И тогда получится что-то такое:
    const AppMessageItems = () => {
      const { id } = useParams(); // react-router-dom hook
      const subset = useContext(YourContextName).find(item => item.id === id);
    
      return (
        <Container>
          <div> Id: {subset.id}</div>
          <div> Text: {subset.text}</div>
          ... 
        </Container>
      );
    };
    Ответ написан
    Комментировать
  • Как реализовать запись в state из props в функциональном компоненте?

    @paoluccio
    Можно попробовать синхронизировать локальный стэйт с данными из редакса. Структура, приблизительно, будет следующей:
    const Form = props => {
      const [localData, setLocalData] = useState();
    
      useEffect(() => {
        setLocalData(props.reduxData);
      }, [props.reduxData]);
    
      return (
        // ...
      );
    };


    Далее, в блоке return, через onChange на полях вашей формы, обновляете локальный стэйт. По сабмиту формы или еще как-нибудь, диспатчите экшн с актуальными данными из локального стэйта.
    Ответ написан
    1 комментарий