将 props 传递给 useState React

Question

我正在尝试使用来自 redux 的道具作为渲染我的状态完整组件的起点，如下所示：

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 存在。

有人可以说明如何正确执行此操作吗？ 谢谢。

编辑：

我在发布代码 sn-p 时出错，我现在更新了它。 const mapStateToProps 和 const mapDispatchToProps 显然必须在组件范围之外，它们是。

Answer 1

你需要注意三件事

1. useState 的参数仅在初始加载期间使用一次，并且当 props 更改时状态不会更新
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));

如果 redux 存储中的数据在初始挂载之前可用，您将在 console.log 中看到它