Tag Archives: reactjs

[Solved] Error: The slice reducer for key “auth“ returned undefined during initialization. If the state pas

Error: The slice reducer for key “auth” returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don’t want to set a value for this reducer, you can use null instead of undefined.

Cause: switch (action.type) is not set default

export default function authReducer(state, action) {
    switch (action.type) {
        case SIGNUP:
            return {
                ...state,
                signup: {
                    loaded: false,
                    success: false,
                }
            }
        default:
            return state;    
     }
}

[MAC] How to Solve zsh Error: command not found: umi

Global installation of UMI

$ tarn global add umi
$ umi -v
[email protected]

When running UMI - V times Zsh: command not found: UMI error, the solution is as follows:

1. Get global bin path

$ yarn global bin
/Users/*****/.yarn/bin

2. Run the open command to open. Bash_ Profile file

$ open ~/.bash_profile

3. In. Bash_ Add the following line to the profile file and save it

export PATH="YOUR global bin FLODER:$PATH"

4. Run the following command to make the modification effective

source ~/.bash_profile

5. Run again and solve the problem

$ umi -v
[email protected]

Ant Design upload listtype = “picture card” realizes multi image upload and click preview image encapsulation

Users can upload pictures and display thumbnails in the list. When the number of photos uploaded reaches the limit, the upload button disappears. Click on the picture to open the picture preview box. Introduce the component where it is used, and the component will return the image array after transferring the image.

import React, {
    useState, useEffect } from 'react';
import {
    Upload, Modal } from 'antd';
import {
    PlusOutlined } fro

Click the button to use in the react project window.open Methods open a new page and click the data again

Problem description
When use the react to do background management program, there is a demand, a list can be according to the conditions of the query, there is a printing function, print is the data of the current query conditions, click on the print button, use the window. The open () method to open the new page, and set the position of open the window, to print the data in a new window display, the real printing function is realized in a new window.

at this time there is a problem, to print the data I am existing in localstorage, when the first open new window, click on the print button to print the data is correct, but if I open the window, not closing new from the previous page to change the terms of the query, click print again, open the last failed to shut down the page, the page does not automatically refresh, also won’t get the latest localstorage inside the value of the printed data is not new.

When I wrote window.location.href directly in componentDidMount, since componentDidMount is the life cycle that executes after the page has been loaded, and the page refresh cycle will be infinite, so this method does not work. I want to try to add a judgment condition, such as whether a value exists in localStorage is equal, but after the value in localStorage changes, both pages will change, so it will always be equal.
Finally, I changed an idea and found a way to listen for changes in the value of localStorage. In a new window, I can listen for changes in the value of localStorage stored in the previous page. If there is any change, I will perform the operation of refreshing the page.

window.addEventListener("storage", function(e) {
    console.log(e)
    window.location.reload()
});

Different files in the same domain will detect changes in stored values. Same file, store value changes, cannot be monitored.
the operation to store the data can be placed at the click of the print button to open the new page, so that the data in the new window does not change until after the click
For this problem, there should be other solutions, thank you added.

Error: Target container is not a DOM element.

As a React guy, today I’m trying to do a little practice with the little example on the official website. I encountered such a problem during the practice. See the following figure for the error.

reported this error because I customized “elementId” in the index.js file.

solution:
if you want to customize the elementId, you need to change the id of the main dom node in the index. HTML file.