条件渲染未使用 setState() 更新

Question

我有一个表单，我想根据该表单中的切换状态更新它。这是我的容器组件，格式为：

import React, { Component } from 'react';
import {
  Create,
  Edit,
  NumberInput,
  SimpleForm,
  TextInput
} from 'admin-on-rest';
import LatLngInput from '../customInputs/LatLngInput';
import UTMInput from '../customInputs/UTMInput';
import UTMSwitch from '../customInputs/UTMSwitch';

export class LocationEdit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      utmInput: false,
      utm: {
        easting: 0,
        northing: 0,
        isSouthern: false,
        zone: 0
      }
    };
  }

  toggleUTM() {
    this.setState(prevState => ({ utmInput: !prevState.utmInput }), () => {
    console.log(this.state.utmInput);
   });
  }

  render() {
    return (
      <Edit title={<LocationTitle />} {...this.props}>
        <SimpleForm validate={validateLocationCreation}>
          <TextInput source="name" />
          {this.state.utmInput ? (
            <UTMInput />
          ) : (
            <LatLngInput />
          )}
          <UTMSwitch defaultToggled={this.state.utmInput} onToggle={this.toggleUTM.bind(this)}/>
        </SimpleForm>
      </Edit>
    );
  }
}

切换应该在两个输入字段之间切换：UTMInput 和 LatLngInput。这些目前非常相似，除了它们的标签：

UTM输入：

import React from 'react';
import { Field } from 'redux-form';
import { NumberInput } from 'admin-on-rest';
const UTMInput = () => (
  <span>
    <Field name="latitude" component={NumberInput} label="Northing" />
    <br />
    <Field name="longitude" component={NumberInput} label="Easting" />
  </span>
);

export default UTMInput;

经纬度输入：

import React from 'react';
import { Field } from 'redux-form';
import { NumberInput } from 'admin-on-rest';
const LatLngInput = () => (
  <span>
    <Field name="latitude" component={NumberInput} label="Latitude" />
    <br />
    <Field name="longitude" component={NumberInput} label="Longitude" />
  </span>
);

export default LatLngInput;

我知道 setState 本身并不能保证 UI 更新，这就是为什么我在 [=17] 中包含 console.log(this.state.utmInput) 作为 setState 函数的回调=]（这会按预期将 true 和 false 交替记录到控制台）。我还尝试了另一种形式的 setState，它接受一个函数而不是一个对象，正如 React docs 所建议的那样。我什至尝试在 console.log(this.state.utmInput) 之后使用 this.forceUpdate()。 None 其中有效。

我在 VSCode 中使用了断点，我可以确认每次切换开关时都会调用 setState 函数，但条件 ({this.state.utmInput ?...)没有被调用。我正在使用 admin-on-rest framework，但我不知道这是否是问题所在。我已经检查了源代码，shouldComponentUpdate 没有用于我从该框架导入的任何组件（<Edit />、<SimpleForm />、<TextInput /> 或 <NumberInput />).

非常感谢任何帮助！

Answer 1

我尝试将重现该错误的示例存储库放在一起，但它在这个新示例中运行良好。事实证明，尽管我做出了最好的猜测，但 Admin On Rest 框架才是问题所在。

从 1.3.2 升级到 1.4.0 版本解决了我的问题。

条件渲染未使用 setState() 更新

Conditional render is not updating with setState()

javascript

reactjs

admin-on-rest