Question

<App foo="123" />

@connect((state) => state, () => {})
class App extends Component

我想用123渲染App。
但是，如果MapStateToProps中的状态具有一个foo键，并且其值为abc，则该组件将呈现abc。

我可以检查ownProps。

@connect((state, ownProps) => ({...state, ...ownProps}), () => {})
class App extends Component

并合并ownProps和状态。但是，如果我开始调度操作以在Redux中更新foo，则状态将始终为abc。 ownProps将始终覆盖状态下的键。

当组件安装时，我可以调度一个动作。

componentDidMount() {
  dispatchFoo(this.props.value)
}

安装组件时，我正在调度值 @ connect（（state）=> state，（）=> {}）`

商店将使用自己的道具价值abc更新。 Redux将更新，并且该组件将再次呈现。
但是这一次，状态将是{.1中的{.1}}。

abc

设置这样的最佳方法是什么？最好不需要该组件渲染两次（我正在使用SSR）。

就我而言，我正在使用NextJS并进行API调用以获取getInitialProps中的数据。 getInitialProps的返回将数据放入道具。这些道具被提供给App。当用户更改状态时，应用需要立即获取状态数据，而不是道具

Answer 1

您有2个选择：

1。使用defaultProps

可以将
defaultProps定义为组件类本身的属性，以设置该类的默认props。用于未定义的道具，但不用于空道具。例如：

App.defaultProps = {
    foo: true
};

请参阅React博客中的defaultProps。

2。设置初始状态

您可以在减速器内部设置状态初始值，这些值可以通过mapStateToProps使用：

const initialState = {
    foo: false
};

export default function(state = initialState, action) {
    console.log('action', action);
    switch (action.type) {
        case types.SOME_ACTION:
            return {
                ...state,
            foo: true
            };
        case types.ANOTHER_ACTION:
            return {
                ...state,
                foo: false
            };
        default:
            return state;
    }
}

通常，我看不到在mapStateToProps内覆盖相同道具的任何意义，因为它应该防止您的应用被redux更新。

Answer 2

如果我没记错的话，您想实现一些称为不受控制的组件。如果是这样，我建议您按以下方式实施。

dp[sum]

那么您的app.js将是

//Generate Random X
    float generateX()
    {
        float x = Random.Range(Camera.main.ScreenToWorldPoint(new Vector2(0, 0)).x, Camera.main.ScreenToWorldPoint(new Vector2(Screen.width, 0)).x);
        return x;
    }

    //Generate Random Y
    float generateY()
    {
        float y = Random.Range(2.0f, Camera.main.ScreenToWorldPoint(new Vector2(0, Screen.height)).y);
        return y;
    }

void generateCoordinates()
    {
        transform.position = new Vector2(generateX(), generateY());
    }

NextJS：处理Connect / OwnProps / GetInitialProps的最佳方法

2 个答案: