将道具传递给 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 在那里。

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

编辑：

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

Answer 1

您需要注意三件事

useState 的参数仅在初始加载期间使用一次，并且在 props 更改时状态不会更新
mapStateToProps 和 mapDispatchToProps 应该在组件范围之外定义
当 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

中看到它

将道具传递给 useState React

Passing props to useState React

state

reactjs

redux

react-hooks