如何在ReactJS中执行下拉列表状态的突变？

当我的下拉列表中选择了一个项目，但出现了一个错误，如果不再次单击，该错误不会改变，我想更改状态

我知道有相关的问题，但我的代码是一个特殊的情况

同样的事情也发生在我身上，就像这张有两个下拉框的图片一样

我更改了“Mes”，但它在您返回并选择另一个值之前不起作用。在那里，我刚改为“第四个月”

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“日期fns/格式”导入格式；
从“graphql标签”导入gql；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从'react router dom'导入{Link}；
从'react apollo'导入{graphql}；
导入“../../node_modules/bootstrap/dist/css/bootstrap.css”；
导入“/style.css”；
进口{
扣子放下，
下拉开关，
下拉菜单，
下拉项，
}来自“反应带”；
从“axios”导入axios；
从“../TituloSmall”导入TituloSmall，{types}；
常量query0=gql`
查询postsdiacomoy（$dia:Int！，$mes:Int！）{
职位（第一名：2名，助理：助理，助理：助理，助理：助理，类别：28名）{
排{
身份证件
费查迪亚霍伊酒店
图像介绍
提特罗
内文
自动
全文索引
全文2
伊曼纽旗
范畴{
身份证件
}
标签{
身份证件
提特罗
}
}
计数
}
}
`;
const renderTagItem=item=>{
常量{id，titulo}=项；
返回(
{titulo}
);
};
const removeTagHtml=valor=>valor.replace（/（]+）>）/g'；
const=valor=>valor.replace（/-@\w+/g'，）；
设更新=0；
设dates=格式（Date（），'D'）；
设月份=格式（日期（），'M'）；
导出类DayScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：这个.props，
当前索引：0，
sortItem1:month，
sortItem2：日期，
康蒂达梅斯：[
“Enero”，
“费布雷罗”，
“Marzo”，
“Abril”，
“蛋黄酱”，
“朱尼奥”，
“胡里奥”，
“Agosto”，
“七胞胎”，
“Octubre”，
“Noviembre”，
“Diciembre”，
],
纵隔：[
1.
2.
3.
4.
5.
6.
7.
8.
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31,
],
};
}
状态={
项目：[]，
};
componentDidUpdate（）{
这个.getArticles（）；
更新=0；
}
getArticles=async（）=>{
常量changeArticles=`
{
帖子（第一个：3，直径：${this.state.sortItem2}，mes:${month}）{
排{
身份证件
费查迪亚霍伊酒店
图像介绍
提特罗
内文
自动
意见
全文索引
全文2
伊曼纽旗
范畴{
身份证件
}
标签{
身份证件
提特罗
}
}
计数
}
}
`;
如果（更新）{
试一试{
const response=等待axios.get(
`http://localhost:4000/graphql/?query=${changeArticles}`，
)。然后（响应=>{
此.setState（（）=>({
项目：response.data.data.posts.rows，
}));
设{data}=this.props；
const{items}=this.state；
data.posts.rows=项目；
返回响应；
});
//记录响应，以便我们可以在控制台中查看它
//将数据设置为状态
}捕获（错误）{
//如果出现错误，请将错误设置为状态
//this.setState（（）=>（{error}））；
console.log（错误）；
//console.log（this.state.error）；
}
}
};
选择索引=方向=>{
const{currentIndex}=this.state；
常数{
数据：{
职位：{count}，
},
}=这是道具；
设nexIndex=currentIndex+方向；
nexIndex=nexIndex<0？计数-1:nexIndex；
nexIndex=nexIndex>=计数？0:nexIndex；
this.setState（{currentIndex:nexIndex}）；
};
月选（）{
const{sortItem1，sortItem2，dropdownOpen1}=this.state；
这是我的国家({
dropdownOpen1:！dropdownOpen1，
});
如果（下拉打开1）{
月份=sortItem1；
日期=sortItem2；
更新=1；
}
}
日期选择（）{
const{sortItem1，sortItem2，dropdownOpen2}=this.state；
这是我的国家({
dropdownOpen2:！dropdownOpen2，
});
如果（下拉打开2）{
月份=sortItem1；
日期=sortItem2；
更新=1；
}
}
onDiasChanged=（e）=>{
this.setState（{sortItem2:[…e.currentTarget.innerHTML]}）；
}
onMesChanged=（e）=>{
this.setState（{sortItem1:[…e.currentTarget.innerHTML]}）；
}
render（）{
const{data}=this.props；
if（数据加载）{
返回装载。。。；
}
if（data.error）{
返回{data.error.message}；
}
if（data.posts.rows.length
{sortItem1}
{cantidadMeses.map（（项目，i）=>(
{i+1}
))}
2.
迪亚
{
此.dateSelected（）；
}}>
{sortItem2}
{diasMes.map（i=>(
{i}
))}
{rows.map（itemArticulo=>(
{removeTagHtml（itemArticulo.i
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import format from 'date-fns/format';
import gql from 'graphql-tag';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { Link } from 'react-router-dom';

import { graphql } from 'react-apollo';

import '../../../node_modules/bootstrap/dist/css/bootstrap.css';
import './style.css';

import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from 'reactstrap';
import axios from 'axios';
import TituloSmall, { types } from '../TituloSmall';

const query0 = gql`
  query postsDiaComoHoy($dia: Int!, $mes: Int!) {
    posts(first: 2, dia: $dia, mes: $mes, categoria: 28) {
      rows {
        id
        fecha_dia_hoy
        imagen_intro
        titulo
        introtext
        autor
        fulltext
        fulltext2
        imagen_banner
        categoria {
          id
        }
        tags {
          id
          titulo
        }
      }
      count
    }
  }
`;

const renderTagItem = item => {
  const { id, titulo } = item;
  return (
    <Link key={id} to={`/tags/${id}/`}>
      <div className="tag">{titulo}</div>
    </Link>
  );
};

const removeTagHtml = valor => valor.replace(/(<([^>]+)>)/g, '');
const removerTwitter = valor => valor.replace(/- @\w+/g, '');

let updated = 0;

let dates = format(Date(), 'D');
let month = format(Date(), 'M');
export class DayScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props,
      currentIndex: 0,
      sortItem1: month,
      sortItem2: dates,
      cantidadMeses: [
        'Enero',
        'Febrero',
        'Marzo',
        'Abril',
        'Mayo',
        'Junio',
        'Julio',
        'Agosto',
        'Septiembre',
        'Octubre',
        'Noviembre',
        'Diciembre',
      ],
      diasMes: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28,
        29,
        30,
        31,
      ],
    };
  }

  state = {
    items: [],
  };

  componentDidUpdate() {
    this.getArticles();
    updated = 0;
  }



  getArticles = async () => {
    const changeArticles = `
    {
      posts(first: 3, dia: ${this.state.sortItem2}, mes: ${month}) {
        rows {
          id
          fecha_dia_hoy
          imagen_intro
          titulo
          introtext
          autor
          views
          fulltext
          fulltext2
          imagen_banner
            categoria {
            id
          }
          tags{
            id
            titulo
          }
          }
        count
      }
    }
    `;

    if (updated) {
      try {
        const response = await axios.get(
          `http://localhost:4000/graphql/?query=${changeArticles}`,
        ) .then(response => {
          this.setState(() => ({
            items: response.data.data.posts.rows,
          }));

          let { data } = this.props;
          const { items } = this.state;

          data.posts.rows = items;

          return response;
        });

        // Log the response so we can look at it in the console

        // Set the data to the state



      } catch (error) {
        // If there's an error, set the error to the state
        // this.setState(() => ({ error }));
        console.log(error);
        // console.log(this.state.error);
      }
    }
  };

  selectIndex = direction => {
    const { currentIndex } = this.state;
    const {
      data: {
        posts: { count },
      },
    } = this.props;

    let nexIndex = currentIndex + direction;
    nexIndex = nexIndex < 0 ? count - 1 : nexIndex;
    nexIndex = nexIndex >= count ? 0 : nexIndex;
    this.setState({ currentIndex: nexIndex });
  };

  monthSelected() {
    const { sortItem1, sortItem2, dropdownOpen1 } = this.state;
    this.setState({
      dropdownOpen1: !dropdownOpen1, 
    });
    if (dropdownOpen1) {
      month = sortItem1;
      dates = sortItem2;
      updated = 1;
    }
  }

  dateSelected() {
    const { sortItem1, sortItem2, dropdownOpen2 } = this.state;

    this.setState({
      dropdownOpen2: !dropdownOpen2,
    });
    if (dropdownOpen2) {
      month = sortItem1;
      dates = sortItem2;
      updated = 1;
    }
  }


  onDiasChanged=(e)=>{
     this.setState({sortItem2:[...e.currentTarget.innerHTML]});
   }

   onMesChanged=(e)=>{
    this.setState({sortItem1:[...e.currentTarget.innerHTML]});
  }



  render() {
    const { data } = this.props;
    if (data.loading) {
      return <div>Loading...</div>;
    }
    if (data.error) {
      return <div>{data.error.message}</div>;
    }

    if (data.posts.rows.length <= 0) {
      return <div>Nada que mostrar...</div>;
    }
    const {
      data: {
        posts: { rows },
      },
    } = this.props;

    this.items = this.props.data.posts.rows;
    const {
      currentIndex,
      sortItem1,
      cantidadMeses,
      sortItem2,
      dropdownOpen1,
      dropdownOpen2,
      diasMes,
    } = this.state;

    const item = rows[currentIndex] ? rows[currentIndex] : rows[0];

    const html = item.fulltext + item.fulltext2;
    const image = `${process.env.REACT_APP_IMG_BASE}${item.imagen_intro ||
      item.imagen_banner}`;

    data.variables.mes = sortItem1;
    data.variables.dia = sortItem2;
    return (
      <div className="containerDiaComoHoyNoticia">
        <div className="box">
          <span />
          <span />
          <div className="mesTexto">{cantidadMeses[sortItem1 - 1]}</div>
          <div className="diaTexto">{sortItem2}</div>
        </div>
        <div>
          <div className="textoContainer">
            <div className="tituloDiaComoHoyNoticia">
              {'BUSCA QUE OCURRIÓ EL DÍA QUE TU QUIERAS EN EL FÚTBOL'}
            </div>
            <div className="separatorLinea" />
            <div className="listaMesDia">
              <span className="circuloMesDia">1</span>
              <span>Mes</span>
              <ButtonDropdown
                isOpen={dropdownOpen1}
                toggle={() => {
                  this.monthSelected();
                }}>
                <DropdownToggle color="white" caret>
                  {sortItem1}
                </DropdownToggle>
                <DropdownMenu>
                  {cantidadMeses.map((items, i) => (
                    <DropdownItem
                      dropDownValue="Mes"
                      dropDownValue="Mes" onClick={this.onMesChanged}>
                      {i + 1}
                    </DropdownItem>
                  ))}
                </DropdownMenu>
              </ButtonDropdown>
              <span className="circuloMesDia">2</span>
              <span>Dia</span>

              <ButtonDropdown
                isOpen={dropdownOpen2}
                toggle={() => {
                  this.dateSelected();
                }}>
                <DropdownToggle caret>{sortItem2}</DropdownToggle>
                <DropdownMenu>
                  {diasMes.map(i => (
                    <DropdownItem
                      dropDownValue="Mes" onClick={this.onDiasChanged}>
                      {i}
                    </DropdownItem>
                  ))}
                </DropdownMenu>
              </ButtonDropdown>
            </div>
          </div>
        </div>
        {rows.map(itemArticulo => (
          <div className="listaNoticiasContenido">
            <img
              alt={itemArticulo.titulo}
              src={process.env.REACT_APP_IMG_BASE + itemArticulo.imagen_intro}
              className="listaNoticiasImagen"
            />
            <div className="rectanguloIconoPlay" />
            <div className="contenidoArticulo">
              <div className="tituloArticulo"><a href="#" onClick = {this.state.currentIndex = 1}>{itemArticulo.titulo}</a></div>
              <div className="descripcionArticulo">
                {removeTagHtml(itemArticulo.introtext)}
              </div>
              <div className="escritor">
                <div className="nombreAutor">
                  <div>
                    <FontAwesomeIcon icon="user-circle" />
                    <span className="autorArticulo">
                      {removerTwitter(itemArticulo.autor) || 'Sin autor'}
                    </span>
                    <FontAwesomeIcon icon="eye" />
                    <span className="vistasTotalesArticulos">
                      {itemArticulo.views}
                    </span>
                    <FontAwesomeIcon icon="calendar" />
                    <span className="cantidadArticulosEscritos">
                      {itemArticulo.fecha_dia_hoy}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div className="separadorArticulos" />
          </div>
        ))}
        <h2 className="tituloDescripcion">{item.titulo}</h2>
        <div className="titlesContainer">
          <TituloSmall
            iconName="user-circle"
            label={item.autor || 'Sin autor'}
          />
          <TituloSmall
            iconName="calendar"
            label={format(item.fecha_dia_hoy, 'DD/MM/YYYY')}
          />
        </div>

        <div className="imageIntro">
          <img className="imageDescription" src={image} alt={item.titulo} />
          <div className="esquinaFigura">
            <div className="boxWhite">
              <span />
              <span />
              <div className="mesTextoBoxWhite">
                {cantidadMeses[sortItem1 - 1]}
              </div>
              <div className="diaTextoBoxWhite">{sortItem2}</div>
            </div>
          </div>
        </div>

        <article dangerouslySetInnerHTML={{ __html: html }} />
        <TituloSmall iconName="tags" label="Tags" type={types.BIG} />
        {item.tags.map(itemsTags => renderTagItem(itemsTags))}
      </div>
    );
  }
}

DayScreen.propTypes = {
  data: PropTypes.shape({
    loading: PropTypes.bool.isRequired,
    currentSortItem: PropTypes.string.isRequired,
    error: PropTypes.shape({ message: PropTypes.string }),
  }).isRequired,
};

DayScreen.defaultProps = {};

const queryOptions = {
  options: () => ({
    variables: {
      dia: dates,
      mes: month,
    },
  }),
};

export default graphql(query0, queryOptions)(DayScreen);


  onMessChanged=(e)=>{
     this.setState({sortItem2:e.currentTarget.innerHTML});
    }

  <DropdownMenu>
                  {diasMes.map(i => (
                    <DropdownItem
                      dropDownValue="Mes"
                      onClick={this.onMessChanged}>
                      {i}
                    </DropdownItem>
                  ))}
                </DropdownMenu>