Javascript 使用选项卡导航时单选按钮失去选中状态

这对我来说是一个令人困惑的局面。我有一个很长的表单，所以我把它分成几个部分，并使用React引导选项卡导航。如果加载已填写的表单，它将加载数据库中的所有数据，并呈现所选的正确单选按钮，如下所示（正确行为）：

无论我重新加载页面并返回多少次，它都和那张照片一样，这是正确的。但是，如果我更改了值，所选的单选按钮将按预期更改，并且正确的值将写入数据库（这是正确的行为）：

但是，如果我导航到其他选项卡之一，然后返回，即使数据和状态变量设置为正确的值，现在单选按钮显示为空白（这就是问题所在）：

但我只是再次重新加载页面，现在所有内容都再次按预期呈现。这就是标签导航。我有条件地呈现组件，因为表单太长，如果不呈现，会导致延迟。但在初始加载时，一切看起来都很完美。只是在更改单选按钮值后，我才从一个选项卡更改为另一个选项卡。我不明白

这是我的表格代码：

<Form className="p-3">
                  <h4 className="form-header">
                    Culture Development - {this.props.employee}
                  </h4>
                  <div className="form-section">
                    <h5>Company Culture</h5>
                    <hr />
                    <p className="font-italic font-weight-bold">
                      On a scale from 1 to 5 (1-Lowest/Worst and
                      5-Highest/Best)...
                    </p>
                    <Form.Group
                      as={Row}
                      name="formCulture1"
                      controlId="formCulture1"
                      onChange={this.props.handleChange}
                    >
                      <Form.Label column sm={5}>
                        1. How would you rate your company culture?
                      </Form.Label>
                      <Form.Check
                        inline
                        type="radio"
                        label="1"
                        value="1"
                        name="formCulture1"
                        id="formCulture1-1"
                        defaultChecked={this.props.formCulture1 === 1}
                      />
                      <Form.Check
                        inline
                        type="radio"
                        label="2"
                        value="2"
                        name="formCulture1"
                        id="formCulture1-2"
                        defaultChecked={this.props.formCulture1 === 2}
                      />
                      <Form.Check
                        inline
                        type="radio"
                        label="3"
                        value="3"
                        name="formCulture1"
                        id="formCulture1-3"
                        defaultChecked={this.props.formCulture1 === 3}
                      />
                      <Form.Check
                        inline
                        type="radio"
                        label="4"
                        value="4"
                        name="formCulture1"
                        id="formCulture1-4"
                        defaultChecked={this.props.formCulture1 === 4}
                      />
                      <Form.Check
                        inline
                        type="radio"
                        label="5"
                        value="5"
                        name="formCulture1"
                        id="formCulture1-5"
                        defaultChecked={this.props.formCulture1 === 5}
                      />
                      <Form.Check
                        inline
                        type="radio"
                        label="N/A"
                        value="0"
                        name="formCulture1"
                        id="formCulture1-6"
                        defaultChecked={this.props.formCulture1 === 0}
                      />
                    </Form.Group>
</Form>

文化发展-{this.props.employee}
企业文化


从1到5（1-最低/最差和
5-最高/最佳）。。。

1.你如何评价你的公司文化？

这是我的条件呈现代码：

render() {
    return (
      <ThemeProvider theme={theme}>
        <Container>
          <Div>
            <Tabs
              defaultActiveKey={"general"}
              id="audit=tabs"
              onSelect={this.handleSelect}
            >
              <Tab eventKey="general" title="General">
                {this.state.questionSection === "audit_general" && (
                  <General
                    handleChange={this.handleChange}
                    handleCheck={this.handleCheck}
                    {...this.state}
                    employeeId={this.props.employeeId}
                    employee={this.props.employee}
                  />
                )}
              </Tab>
              <Tab eventKey="culture" title="Culture">
                {this.state.questionSection === "audit_culture" && (
                  <Culture
                    handleChange={this.handleChange}
                    handleCheck={this.handleCheck}
                    {...this.state}
                    employeeId={this.props.employeeId}
                    employee={this.props.employee}
                  />
                )}
              </Tab>
              <Tab eventKey="performance" title="Performance">
                {this.state.questionSection === "audit_performance" && (
                  <Performance
                    handleChange={this.handleChange}
                    handleCheck={this.handleCheck}
                    {...this.state}
                    employeeId={this.props.employeeId}
                    employee={this.props.employee}
                  />
                )}
              </Tab>
              <Tab eventKey="policies" title="Policies">
                {this.state.questionSection === "audit_policies" && (
                  <Policies
                    handleChange={this.handleChange}
                    handleCheck={this.handleCheck}
                    {...this.state}
                    employeeId={this.props.employeeId}
                    employee={this.props.employee}
                  />
                )}
              </Tab>
              <Tab eventKey="risk" title="Risk">
                {this.state.questionSection === "audit_risk" && (
                  <Risk
                    handleChange={this.handleChange}
                    handleCheck={this.handleCheck}
                    {...this.state}
                    employeeId={this.props.employeeId}
                    employee={this.props.employee}
                  />
                )}
              </Tab>
              <Tab eventKey="strategy" title="Strategy">
                {this.state.questionSection === "audit_strategy" && (
                  <Strategy
                    handleChange={this.handleChange}
                    handleCheck={this.handleCheck}
                    {...this.state}
                    employeeId={this.props.employeeId}
                    employee={this.props.employee}
                  />
                )}
              </Tab>
              <Tab eventKey="rewards" title="Rewards">
                {this.state.questionSection === "audit_rewards" && (
                  <Rewards
                    handleChange={this.handleChange}
                    handleCheck={this.handleCheck}
                    {...this.state}
                    employeeId={this.props.employeeId}
                    employee={this.props.employee}
                  />
                )}
              </Tab>
              <Tab eventKey="workforce" title="Workforce">
                {this.state.questionSection === "audit_workforce" && (
                  <Workforce
                    handleChange={this.handleChange}
                    handleCheck={this.handleCheck}
                    {...this.state}
                    employeeId={this.props.employeeId}
                    employee={this.props.employee}
                  />
                )}
              </Tab>
            </Tabs>
          </Div>
        </Container>
      </ThemeProvider>
    );

render（）{
返回(
{this.state.questionSection===“审计概述”&&(
)}
{this.state.questionSection===“审计文化”&&(
)}
{this.state.questionSection===“审计绩效”&&(
)}
{this.state.questionSection==“审计策略”&&(
)}
{this.state.questionSection===“审计风险”&&(
)}
{this.state.questionSection===“审计策略”&&(
)}
{this.state.questionSection==“审计奖励”&&(
)}
{this.state.questionSection===“审计团队”&&(
)}
);

以前有人看到过吗？

请在此处添加您的代码-