Question

我有一个包含用于用户的验证表的组件。该组件在挂载时运行graphql查询。在Verification组件中，我需要使用来自graphql查询的数据来设置状态，以便可以使用它来更新任何值，然后将它们与表单一起提交。此后，我了解了getDerivedStateFromProps，并且正在努力从该数据填充新状态。但是，数据在DOM中不可用。就像render在getDerivedStateFromProps之前被调用一样。

以下是组件：

class Verification extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            company: {
                legalName: ''
            },
            openCorporatesCompany: {}
        };
    }

    handleLegalNameChange = (legalName) => {
        let company = _.cloneDeep(this.state.company);
        company.legalName = legalName;
        this.setState({
            company
        })
    };

    static getDerivedStateFromProps(next, prev) {
        let newState = _.cloneDeep(prev);
        let {openCorporates: {getEntityAttribute}} = next;

        if (getEntityAttribute && getEntityAttribute.value) {
            let openCorporatesCompany = JSON.parse(getEntityAttribute.value);
            let company = _.cloneDeep(newState.company);
            company.legalName = openCorporatesCompany.name;
            newState.openCorporatesCompany = openCorporatesCompany;
            newState.company = company;

            return newState;
        }

        return null;
    }

    render() {
        console.log(this.state);

        return (
                    <Input
                        label='Legal Name'
                        placeholder='Legal entity name...'
                        type='text'
                        subtext='Use the name your customers or clients will recognize'
                        onChange={this.handleLegalNameChange}
                        value={this.state.legalName}
                    />
        );
    }
}

export const VerificationContainer = compose(
    connect(mapStateToProps, mapDispatchToProps)
    graphql(GetEntityAttributeQuery, {
        name: "openCorporates",
        options: (props) => ({
            variables: {
                entityId: props.currentEntity.id,
                type: EntityAttributes.TypeOpenCorporates
            }
        })
    })
)(Verification);

console.log(this.state)中render的控制台输出如下所示：

如您所见，该字段在company.legalName中的状态下已更新。但是，它永远不会在“输入”框中填充：

为什么输入的状态不会更新为新状态？就像渲染在getDerivedStateFromProps之前被调用一样。

Answer 1

我知道您在反应和组件更新方面遇到的困难，但是我想没有摆脱它的防弹方法。 80％的人应该尝试任何一种不同的生命周期方法。以前有 componentWillReceiveProps 用于异步调用，但是由于它被标记为不安全（我想），因此您应该尝试 getDerivedStateFromProps（props，state）

getDerivedStateFromProps(props, state) {
  console.log("*************** PROPS:",  props);

  let { openCorporates: { getEntityAttribute  } } = props;

  if (getEntityAttribute  &&  getEntityAttribute.value) {
      let openCorporatesCompany = JSON.parse(getEntityAttribute.value);
      let company = _.cloneDeep(this.state.company);

      company.legalName = openCorporatesCompany.name;
      this.setState({
          openCorporatesCompany,
          company
      })
  }
}

考虑到我还没有运行这段代码。

Answer 2

这要归功于@Charlie的回答：

android:visiblity = "invisible"

React-Apollo-渲染在getDerivedStateFromProps之前被调用

2 个答案: