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。这些目前非常相似，但标签除外：

UTMInput：

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;

LatLngInput：

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更新，这就是为什么我将console.log(this.state.utmInput)作为setState中toggleUTM函数的回调包含在内的原因按预期方式将true和false交替记录到控制台。我还尝试了另一种形式的setState，它接受一个函数而不是一个对象，如React docs所示。我甚至尝试在this.forceUpdate()之后使用console.log(this.state.utmInput)。这些都没有奏效。

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

非常感谢任何帮助！

Answer 1

我尝试组合一个重现错误的示例repo，但它在这个新示例中运行良好。事实证明，尽管我最好的猜测，Admin On Rest框架仍然存在问题。

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

使用setState（）不更新条件渲染

1 个答案: