Parastoo Ebrahimi
4 سال پیش توسط Parastoo Ebrahimi مطرح شد
6 پاسخ

مشکل با nesting

سلام. من برای آپدیت کردن یه متغیر که آرایه ای از آبجکت هاست کدم به صورت زیره:

 if (data.name === changedColumn) {
                    return {
                      ...data,

                     options:{sortDirection:direction}
                    };
                  } else
                    return {
                      ...data,
                      options: {}
                    };

این کد همه ی اون چیزایی که توی option هست رو بر میداره و sortDirection رو ست میکنه. من میخوام اون چیزایی که توی option هستن باقی بمونن و فقط sortDirection آپدیت بشه. ممنون میشم راهنمایی کنید چجوری کد رو آپدیت کنم
@hesammousavi
@sinashahoveisi
@kamran.davar
@mohsenbostan


ثبت پرسش جدید
محسن بستان
تخصص : Senior Backend Developer
@mohsenbostan 4 سال پیش مطرح شد
1

@parastooebrahimi
سلام.
به صورت زیر بنویسید :

options:{ ...data.options, sortDirection:direction}

Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 4 سال پیش مطرح شد
0

بله امتحان کردم اینو
ولی درست نشد و بازم کل آپشنو آپدیت میکنه
@mohsenbostan


سینا شاه‌اویسی
تخصص : برنامه نویس فرانت اند
@sinashahoveisi 4 سال پیش مطرح شد
1

سلام با تغییر کد زیر مشکل حل میشه.

col = col.map(data => {
        if (data.name === sortField) {
          console.log("sina log", data.options);
          return {
            ...data,
            options: {
              ...data.options,
              sortDirection: sortDir
            }
          };
        } else{
         delete data.options.sortDirection
          return {
            ...data,
            options: {
              ...data.options,
            }
          };
        }
      });

برای تست هم فایل Example.js :

import React from "react";
import { CircularProgress, Typography } from "@material-ui/core";
import MUIDataTable from "mui-datatables";

class Example extends React.Component {
  state = {
    page: 0,
    count: 1,
    rowsPerPage: 5,
    sortOrder: {},
    data: [["Loading Data..."]],
    columns: [
      {
        name: "fullName",
        options: { filter: false }
      },
      {
        name: "title",
        label: "Title",
        options: {filter: false}
      },
      {
        name: "location",
        label: "Location",
        options: {}
      }
    ],
    isLoading: false
  };

  componentDidMount() {
    this.getData("", 0);
  }

  // get data
  getData = (url, page) => {
    this.setState({ isLoading: true });
    this.xhrRequest(url, page).then(res => {
      this.setState({ data: res.data, isLoading: false, count: res.total });
    });
  };

  getSrcData = () => {
    return [
      {
        fullName: "Gabby George",
        title: "Business Analyst",
        location: "Minneapolis"
      },
      {
        fullName: "Aiden Lloyd",
        title: "Business Consultant",
        location: "Dallas"
      },
      { fullName: "Jaden Collins", title: "Attorney", location: "Santa Ana" },
      {
        fullName: "Franky Rees",
        title: "Business Analyst",
        location: "St. Petersburg"
      },
      { fullName: "Aaren Rose", title: "Business Analyst", location: "Toledo" },

      {
        fullName: "John George",
        title: "Business Analyst",
        location: "Washington DC"
      },
      {
        fullName: "Pat Lloyd",
        title: "Computer Programmer",
        location: "Baltimore"
      },
      {
        fullName: "Joe Joe Collins",
        title: "Attorney",
        location: "Las Cruces"
      },
      { fullName: "Franky Hershy", title: "Paper Boy", location: "El Paso" },
      {
        fullName: "Aaren Smalls",
        title: "Business Analyst",
        location: "Tokyo"
      },

      { fullName: "Boogie G", title: "Police Officer", location: "Unknown" },
      {
        fullName: "James Roulf",
        title: "Business Consultant",
        location: "Video Game Land"
      },
      {
        fullName: "Mike Moocow",
        title: "Burger King Employee",
        location: "New York"
      },
      {
        fullName: "Mimi Gerock",
        title: "Business Analyst",
        location: "McCloud"
      },
      {
        fullName: "Jason Evans",
        title: "Business Analyst",
        location: "Mt Shasta"
      },

      {
        fullName: "Simple Sam",
        title: "Business Analyst",
        location: "Mt Shasta"
      },
      {
        fullName: "Marky Mark",
        title: "Business Consultant",
        location: "Las Cruces"
      },
      { fullName: "Jaden Jam", title: "Attorney", location: "El Paso" },
      {
        fullName: "Holly Jo",
        title: "Business Analyst",
        location: "St. Petersburg"
      },
      { fullName: "Suzie Q", title: "Business Analyst", location: "New York" }
    ];
  };

  sort = (page, sortOrder) => {
    this.setState({ isLoading: true });
    console.log("sina", sortOrder);
    this.xhrRequest(
      `/myApiServer?page=${page}&sort_order=${sortOrder}`,
      page,
      sortOrder
    ).then(res => {
      this.setState({
        data: res.data,
        page: res.page,
        sortOrder,
        isLoading: false,
        count: res.total
      });
    });
  };

  // mock async function
  xhrRequest = (url, page, sortOrder = {}) => {
    return new Promise((resolve, reject) => {
      // mock page data
      let fullData = this.getSrcData();
      let sortField = sortOrder.name;
      let sortDir = sortOrder.direction;
      const total = fullData.length; // mock record count from server - normally this would be a number attached to the return data
      let col = this.state.columns;
      console.log("col before", col);
      col = col.map(data => {
        if (data.name === sortField) {
          console.log("sina log", data.options);
          return {
            ...data,
            options: {
              ...data.options,
              sortDirection: sortDir
            }
          };
        } else{
         delete data.options.sortDirection
          return {
            ...data,
            options: {
              ...data.options,
            }
          };
        }
      });
      console.log("col after", col);
      this.setState(prevState => {
        return {
          ...prevState,
          columns: col
        };
      });

      console.log("log", fullData[0], sortField);
      if (sortField) {
        fullData = fullData.sort((a, b) =>
          a[sortField] > b[sortField]
            ? 1
            : a[sortField] === b[sortField]
            ? a[sortField] > b[sortField]
              ? 1
              : -1
            : -1
        );
      }

      const srcData = fullData.slice(
        page * this.state.rowsPerPage,
        (page + 1) * this.state.rowsPerPage
      );
      let data = srcData;

      setTimeout(() => {
        resolve({
          data,
          total,
          page
        });
      }, 500);
    });
  };

  changePage = (page, sortOrder) => {
    sortOrder = {
      name: "title",
      direction: "asc"
    };
    console.log("page", page, sortOrder);
    this.setState({
      isLoading: true
    });
    this.xhrRequest(`/myApiServer?page=${page}`, page, sortOrder).then(res => {
      this.setState({
        isLoading: false,
        page: res.page,
        sortOrder,
        data: res.data,
        count: res.total
      });
    });
  };

  render() {
    const { data, page, count, isLoading, rowsPerPage, sortOrder } = this.state;

    const options = {
      filter: true,
      filterType: "dropdown",
      responsive: "vertical",
      serverSide: true,
      count: count,
      rowsPerPage: rowsPerPage,
      rowsPerPageOptions: [],
      onTableChange: (action, tableState) => {
        console.log(action, tableState);

        // a developer could react to change on an action basis or
        // examine the state as a whole and do whatever they want

        switch (action) {
          case "changePage":
            this.changePage(tableState.page, tableState.sortOrder);
            break;
          case "sort":
            let a = tableState.announceText
              .replace("Table now sorted by ", "")
              .replace(" :", "")
              .split(" ");
            if (a[1] === "descending") a[1] = "desc";
            else a[1] = "asc";
            let b = { name: a[0], direction: a[1] };
            console.log(a);
            this.sort(tableState.page, b);
            break;
          default:
            console.log("action not handled.");
        }
      }
    };

    console.log("COLUMNS");
    console.dir(JSON.parse(JSON.stringify(this.state.columns)));

    return (
      <div>
        <MUIDataTable
          title={
            <Typography variant="h6">
              ACME Employee list
              {isLoading && (
                <CircularProgress
                  size={24}
                  style={{ marginLeft: 15, position: "relative", top: 4 }}
                />
              )}
            </Typography>
          }
          data={data}
          columns={this.state.columns}
          options={options}
        />
      </div>
    );
  }
}

export default Example;

کامران داور
تخصص : Front-end developer
@kamran.davar 4 سال پیش آپدیت شد
1

@parastooebrahimi
کدی که آقای @mohsenbostan گفتن باید درست کار بکنه. حالا اگه درست کار نمیکنه پس ایراد کارتون از یه جای دیگه است.

 if (data.name === changedColumn) {
                    return {
                      ...data,

                     options:{ ...data.options, sortDirection:direction}
                    };
                  } else
                    return {
                      ...data,
                      options: { ...data.options, sortDirection:{}}
                    };
                }

Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 4 سال پیش مطرح شد
0

@kamran.davar بله مثل اینکه اشکال جای دیگه ای هست که هنوز نفهمیدم از چی میتونه باشه


سینا شاه‌اویسی
تخصص : برنامه نویس فرانت اند
@sinashahoveisi 4 سال پیش مطرح شد
1

به این هم توجه داشته باشید که mui datatable اگر توی options یک prop داشته باشید که توی داکیومنتیشنش نباشه خودش خود به خود پاکش میکنه
مثلا اگه

options: { filter: false }

باشه،‌با کد بالا دیگه پاک نمیشه ولی اگه مثلا یه چیزی بزنید که براش بی معنی باشه مثل :

options: { salam: false }

این خودش پاکش میکنه و شاید شما فکر کنید که کد درست کار نمیکنه در صورتی که کد درست هستش


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام