时间戳

首页 > 解决方案 > React 不更新值也不更新状态

reactjs - React 不更新值也不更新状态

问题描述

无论我写什么，即使我写了一个变量并将其推入它并在filterColumns函数中输入console.log该值，它仍然没有给出更新的值，也没有给出简单变量或状态，console.log(filteringItems) 里面filterColumns只给出属性值，但在addFilteringItem函数内部它只记录初始状态值，甚至想不出代码有什么问题，如果您有任何其他问题，我会回答其中的任何一个。

import { GridColumnsConfig } from './GridColumnsConfig/GridColumnsConfig';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import React, { useEffect, useState } from "react";
import { IOptionsData } from "./Grid";

interface IGridDropdownItemProps {
  options: IOptionsData;
  filterRequest: any;
  cancelFilter?: any;
  // filterRequest: (data: IDataRecords) => () => () => void; #comehere
}

function GridDropdownItem(props: IGridDropdownItemProps) {
  let id: number = Math.ceil(Math.random() * 1000000000000);

  const [filteringItems, setFilteringItems] = useState([...props.options.columns]);

  const addFilteringItem = (name:string) => {
    let temp = filteringItems.map((item) =>{
      if(item.name === name){
        item.visible = !item.visible;
      }
      return item;
    });
    setFilteringItems([...temp]);
  };

  const filterColumns = () => {
    let columns = [...filteringItems];
    // add all column name by default

    let data: {
      columns: any[];
      limit: number;
      page: number;
    } = {
      columns: columns,
      limit: props.options.limit,
      page: props.options.page,
    };

    let tempColumns = [
      ...columns.filter(
        (col) =>
          Object.entries(columns).filter(
            (fi) => fi[0] === col.name && fi[1] === false
          ).length > 0
      ),
    ];

    columns.map((col) => {
      col.visible = true;
      delete col.filter.value;
    });

    // tempColumns changes part of columns(bcs of pointer) that changes data.columns(bcs of pointer too)
    tempColumns.map((col) => {id
      col.visible = false;
      col.filter.value = null;
    });

    // console.log(columns, tempColumns);
    props.filterRequest(data);
  };

  return (
    <div className="single-button-dropdown uib-dropdown-menu nt-scroll custom-dropdown btn-block old-dropdown-styles ">
      <ul
        className="dropdown-block scroll vertical hard"
        style={{ width: "100%" }}
      >
        <li>
          <DndProvider backend={HTML5Backend}>
            <GridColumnsConfig columns={filteringItems} handleCheckboxClick={addFilteringItem}/>
          </DndProvider>
        </li>
      </ul>
      <div style={{ position: "absolute", zIndex: 1 }} className="buttons">
        <div className="actions">
          <div className="pull-right">
            <button
              type="button"
              className="btn btn-primary"
              onClick={() => {
                filterColumns();
                props.cancelFilter();
              }}
            >
              Submit
            </button>

            {props.options.compactMenu !== undefined &&
            props.options.compactMenu ? (
              <button
                type="button"
                className="btn btn-primary"
                style={{ background: "#ff8518", color: "#fff" }}
                ng-click="saveGridState()"
              >
                Save
              </button>
            ) : (
              <button
                className="nd btn btn-default"
                onClick={() => props.cancelFilter()}
              >
                Close
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default GridDropdownItem;

标签： reactjsreact-hooks

解决方案

累真的让我的视线变得模糊，问题出在突变上。

我直接改变了道具，那是一次又一次地将我的状态设置为道具值。

let temp = filteringItems.map((item) =>{
  if(item.name === name){
    item.visible = !item.visible;
  }
  return item;
});

固定代码

let temp = props.options.columns.map((item) =>{
      if(item.name === name){
        return {...item,visible:!item.visible}
      }
      return item;
});

推荐阅读