设置状态不起作用

我正在学习 React.js。我有一个向页面添加组件的表单。我正在验证此表格。当点击 Add 按钮时，触发 onBtnClickHandler() 函数，该函数接收来自表单输入的值并更新状态。在每一个输入中，我都有一个name属性，这个属性的值变成了一个key，输入的值变成了value，这一切都落入了新的状态。表格效果很好。接下来，使用 validate() 函数，我检查输入中是否输入了任何内容并更新状态。为此，我有一个 objectItems 对象，我在其中写入输入的状态 nameMyInputIsValid ：真或假。一切正常。我在 objectItems 中也有 formIsValid 属性，默认情况下为 false。在 validateData() 函数中，我检查了 this.state。所有 nameMyInputIsValid 的 objectItems 值为 true，并且想要更新状态覆盖 formIsValid：true。但是状态没有更新，我不明白为什么。

import React, { Component } from 'react';
import Card from './Card';
import apiCall from '../../Api/mockedApi';
import CardsGenerator from './CardsGenerator';


class CardsContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      objectItems: {
        genderIsValid: false,
        priceIsValid: false,
        titleIsValid: false,
        imageUrlIsValid: false,
        formIsValid: false,
      },

    };

    this.deleteCard = this.deleteCard.bind(this);
    this.onChangeInput = this.onChangeInput.bind(this);
    this.onBtnClickHandler = this.onBtnClickHandler.bind(this);
    this.validate = this.validate.bind(this);
    this.validateData = this.validateData.bind(this);
  }

  componentDidMount() {
    apiCall().then(
      (result) => {
        this.setState({
          isLoaded: true,
          items: result,
        });
      },

      (error) => {
        this.setState({
          isLoaded: true,
          error,
        });
      },
    );
  }

  onChangeInput(event) {
    const { name } = event.currentTarget;
    const { value } = event.currentTarget;
    this.setState(state => ({ objectItems: { ...state.objectItems, [name]: value, [`${name}IsValid`]: this.validate(value) } }));
  }

  onBtnClickHandler(e) {
    e.preventDefault();
    this.setState(state => ({ items: [...state.items, state.objectItems] }));
    console.log(this.state.objectItems);
    this.validateData();
  }

  validate(value) {
    if (typeof value === 'string') {
      return value.length > 2;
    } if (typeof value === 'number') {
      return value >= 0;
    }
    return value;
  }

  validateData() {
    const {
      genderIsValid, priceIsValid, titleIsValid, imageUrlIsValid, formIsValid,
    } = this.state.objectItems;
    if (genderIsValid === true && priceIsValid === true && titleIsValid && imageUrlIsValid === true) {
      this.setState(() => ({ objectItems: { formIsValid: true } }));
      // this.setState({objectItems:{formIsValid:true}})
    }
    console.log(genderIsValid, priceIsValid, titleIsValid, imageUrlIsValid, formIsValid);
  }

  deleteCard(e, index) {
    e.preventDefault();
    const { items } = this.state;
    const newItems = items.filter((item, i) => i !== index);
    this.setState(() => ({
      items: newItems,
    }));
  }


  render() {
    const { error, isLoaded, items } = this.state;
    const itemColorBorder = () => this.state.objectItems.map(
      (item, index, arr) => (item === true ? 'green' : 'red'),
    );
    if (error) {
      return <div>No cards yet</div>;
    } if (!isLoaded) {
      return <div>Loading...</div>;
    }
    return (
      <React.Fragment>
        {items.map(
          (item, index) => <Card info={item} index={index} del={this.deleteCard} />,
        )}
        <CardsGenerator id="cardGenerateForm" key={9379992} add={this.onChangeInput} submit={this.onBtnClickHandler} borderColor={itemColorBorder} disabled={this.state.objectItems.formIsValid} validate={this.validate} />
      </React.Fragment>
    );
  }
}
export default CardsContainer;