Question

正如您所看到的，LoginContainer.js包含一个组件Form和内部表单，有多个子项。在Form.js中，我循环遍历子项，为子道具添加一些自定义方法，最后输出它们。

isFetching来自redux商店。

当<{1}}更改为true时，在LoginContainer中

，FormButton组件不会收到新的prop值，因为它由Form组件拥有。

我知道为什么会发生这种情况，因为Form组件不会直接更改而且不会更新，所以孩子们不会被重新渲染。

有没有一种方法可以让Form.js更新它的孩子？

LoginContainer.js

isFetching

Form.js

 @connect((store) => ({
      isFetching: store.users.isFetching,
      error: store.users.error
    }), (dispatch) => ({
      action: bindActionCreators(actionCreators, dispatch)
    }))
    class LoginContainer extends Component {

      handleAuth(user) {
       this.props.action.fetchAndHandleUser(user.email, user.password)
      }

            render() {

                const { isFetching } = this.props

                return (
                    <h1>Login to VMS</h1>
                    <Form onFormSubmit={this.handleAuth} formClass={styles.loginForm}>

                      ....

                      <FormButton
                        type="submit"
                        buttonText="Login"
                        showLoader={isFetching} // default value is false
                        loaderText="Authenticating" />

                    </Form>
                )
            }
        }

Answer 1

将isFetching的值绑定在state中。然后在值更改时更新状态以使反应重新呈现。

从更高级别的父级更新子级

1 个答案: