Передача реквизита для использования State React

Question

Я пытаюсь использовать реквизиты, полученные из-за редукса, в качестве отправной точки для рендеринга моего компонента с полным состоянием, например:

const MyComp = (props) => {

    const initState = {
        newAttribs: [...props.attribs]
        };

    const [state, setState] = useState(initState)
    console.log(state)

};

const mapStateToProps = (fromRedux) => {...};
const mapDispatchToProps = (dispatch) => {...};

export default connect(mapStateToProps, mapDispatchToProps)(React.memo(MyComp));

Но если я console.log(state), он показывает пустой массив для newAttribs, хотя в initState newAttribs есть.

Может кто-нибудь пролить свет на то, как это сделать правильно? Спасибо.

EDIT:

Я сделал ошибку при публикации фрагмента кода, я обновил его сейчас. const mapStateToProps и const mapDispatchToProps, очевидно, должны находиться за пределами области действия компонента, и они есть.

Answer 1

Есть две вещи, о которых вам нужно позаботиться

1. Аргумент для useState используется только один раз при начальной загрузке, и состояние не будет обновляться при изменении реквизита
2. mapStateToProps и mapDispatchToProps должны быть определены вне области действия компонента
3. Когда props.attribs изменяется, вам нужно обновить состояние вашего компонента, что вы можете сделать, используя useEffect

Пример

const MyComp = (props) => {

    const initState = {
        newAttribs: [...props.attribs]
    };

    const [state, setState] = useState(initState)

    useEffect (() => { 
          setState({ ...state, newAttribs: [...props.attribs] }) 
    }, [props.attribs])
    console.log(state)


};

const mapStateToProps = (fromRedux) => {...};
const mapDispatchToProps = (dispatch) => {...};
export default connect(mapStateToProps, mapDispatchToProps)(React.memo(MyComp));

Если данные из избыточного хранилища доступны до первоначального монтирования, вы увидите их в console.log