问题

以下是您的代码：

class AppModal extends Component {
    static propTypes = {
        noDocs: PropTypes.bool
    };

    constructor(props) {
        super(props);
        this.state = {
            catSelected: false
        }
    }

    onChange = value => {
        this.setState({
            catSelected: true
        })
    }

    render() {
        const header = (
            <div>
                {
                    this.state.catSelected && this.props.noDocs && (
                        <p>
                            selected req don't apply
                        </p>
                    )
                }
            </div>
        );

        return (
            <Modal
                header={header}>
                <form>
                    {ADD_DOC.map(item => (
                        <Row key={item}>
                            <Col>
                                <Field
                                    component="input"
                                    onChange={(e, val) => this.onChange(val)}
                                />
                            </Col>
                        </Row>
                    ))}
                </form>
            </Modal>
        )
    }
}

const mapStateToProps = (state, props) => {
    const initialValues = {
        noDocs: true
    }
    let noDocs = formValueSelector('addDoc')(state, 'noDocs');
    noDocs = !!noDocs
    return {
        noDocs
    };
}; 

export default connect(mapStateToProps)(
    reduxForm()(AppModal)
);

关于您的问题，您想要确保标题仅在 this.state.catSelected && this.props.noDocs 为 true 时显示。如果标题在不应显示时短暂出现然后消失，这可能是由于组件的重新渲染导致的。

您可以尝试在 render 方法的开始处添加一个条件，以确保只有在 this.state.catSelected && this.props.noDocs 为 true 时才渲染标题：

render() {
    const shouldRenderHeader = this.state.catSelected && this.props.noDocs;

    const header = (
        <div>
            {shouldRenderHeader && (
                <p>
                    selected req don't apply
                </p>
            )}
        </div>
    );

    // ...其余代码...
}

这将确保标题只在满足条件时才渲染，避免了在不应显示时短暂出现和消失的问题。

class AppModal extends Component {
static propTypes = {
noDocs :this.propTypes.bool
};
constructor(props) {
super(props);
this.state = {
catSelected: false
}
}
onChange= value => {
this.setState({
catSelected: true
})
}
render() {
const header = (
<div>
{
this.state.catSelected && this.props.noDocs && (
<p>
selected req don't apply
</p>
)
}
</div>
);
return (
<Modal
header={header}>
<form>
{ADD_DOC.map(item => (
<Row>
<Col>
<Field>
component={input}
onChange={(e, val) => this.onChange(val)}
</Field>
</Col>
</Row>
))}
</form>
</Modal>
)
}
}
const mapStateToProps = (state, props) => {
const initialValues={
noDocs = true
}
let noDocs = formValueSelector('addDoc')(state, 'noDocs');
noDocs = !!noDocs
return {
noDocs
};
}; 
export default connect(mapStateToProps) {
reduxForm()(AppModal)
}

答案1

得分: 1

将组件的状态中的catSelected初始化为true，而不是false。这将防止初始时显示标题。

constructor(props) {
  super(props)
  this.state = {
    catSelected: true
  }
}

更新onChange方法，以根据value参数设置catSelected。这确保了当值发生变化时，catSelected会正确更新。

onChange = value => {
  this.setState({
    catSelected: !!value
  })
}

只有当catSelected和noDocs都为true时才渲染标题，这可以防止它在短暂地出现和消失。

render() {
  const header =
    this.state.catSelected && this.props.noDocs ? (
      <div>
        <p>selected req don't apply</p>
      </div>
    ) : null

  // 你的其余代码...
}

constructor(props) {
  super(props)
  this.state = {
    catSelected: true
  }
}

onChange = value => {
  this.setState({
    catSelected: !!value
  })
}

render() {
  const header =
    this.state.catSelected && this.props.noDocs ? (
      <div>
        <p>selected req don't apply</p>
      </div>
    ) : null

  // Rest of your code...
}

答案2

得分: 0

Nazrul Chowdhury的答案有效，但消息会显示在初始视图上，这不是我想要的。

我观察到在我的mapStateToProps中为'redux'状态值'noDocs'设置了'initialValues'。

当我在initialValues中将noDocs设置为false时，我能够停止出现和消失标题。

下面也修复了这个问题：

const initialValues = {
  noDocs: false
}

const initialValues = {
noDocs = false 
}