क्षमा करें यदि प्रश्न खराब है, तो मैं प्रतिक्रिया में कुल भिखारी हूं।

मैं एक डैशबोर्ड बनाने की कोशिश कर रहा था, लेकिन मेरे राज्य हमेशा पुन: प्रारंभ हो जाते हैं। यहाँ मेरे app.js की सामग्री है।

import './index.css';
import React, { useState, useEffect, useRef, PureComponent, Component } from 'react';

class WidgetStatus extends Component {
  constructor(props) {
    super(props);
    this.intef = 0;
    this.state = {
      "4766":0,
      "4767":0,
      "4768":0,
      "4769":0,
      "4770":0,
      "4771":0,
    };
  }
  setPOLState(Num, choice) {
    this.intef += 1;
    this.setState(previousState => ({[Num]: this.previousState[Num] + choice}));
  }
  render(Num) {
    if (this.state[Num] == 0) {
      return (
        <div>
          test
        </div>
      );
    } else if (this.state[Num] == 1) {
      return (
      <div>
        You chose one
        </div>
      );
    } else if (this.state[Num] == 2) {
      return (
      <div>
        You chose two
        </div>
      );
    } else if (this.state[Num] == 3) {
      return (
      <div>
        You chose three
        </div>
      );
    } else if (this.state[Num] == 4) {
      return (
      <div>
        You chose four
        </div>
      );
    } else if (this.state[Num] == 5) {
      return (
      <div>
        You chose five
        </div>
      );
    } else if (this.state[Num] == 6) {
      return (
      <div>
        You chose six
        </div>
      );
    }
  }
};

const statwid = new WidgetStatus();

function App() {

  let machin = 1;
  statwid.setPOLState("4771", 1);
  
  function Dropitemclick(numNav, numitem) {
      function handleclick(numNav, numitem) {
        statwid.setPOLState(numNav, numitem);
        }
      handleclick(numNav, numitem);
      }

  function App2() {
    machin += 1;
    return (
      <React.Fragment>
        <Navbar>
          <NavItem icon={"Choice"}>
            <DropdownMenu number={"4766"}></DropdownMenu>
          </NavItem>
        </Navbar>
          <div>{statwid.render("4766")}</div>
        <Navbar>
          <NavItem icon={"Choice"}>
            <DropdownMenu number={"4767"}></DropdownMenu>
          </NavItem>
        </Navbar>
        <div>{statwid.render("4767")}</div>
        <Navbar>
          <NavItem icon={"Choice"}>
            <DropdownMenu number={"4768"}></DropdownMenu>
          </NavItem>
        </Navbar>
        <div>{machin + 1}</div>
        <Navbar>
          <NavItem icon={"Choice"}>
            <DropdownMenu number={"4769"}></DropdownMenu>
          </NavItem>
        </Navbar>
        <div>{statwid.render("4769")}</div>
        <Navbar>
          <NavItem icon={"Choice"}>
            <DropdownMenu number={"4770"}></DropdownMenu>
          </NavItem>
        </Navbar>
        <div>{statwid.render("4770")}</div>
        <Navbar>
          <NavItem icon={"Choice"}>
            <DropdownMenu number={"4771"}></DropdownMenu>
          </NavItem>
        </Navbar>
        <div>{statwid.render("4771")}</div>
      </React.Fragment>
    );
  }

  function Navbar(props) {
    return (
      <nav className="navbar">
        <ul className="navbar-nav">{props.children}</ul>
      </nav>
    );
  }

  function NavItem(props) {
    const [open, setOpen] = useState(false);

    return (
      <li className="nav-item">
        <a href="#" className="icon-button" onClick={() => setOpen(!open)}>
          {props.icon}
        </a>

        {open && props.children}
      </li>
    );
  }

  function DropdownMenu(props) {
    function DropdownItem(props) {
      return (
        <a href="#" className="menu-item">
          <span className="icon-button">{props.leftIcon}</span>
          {props.children}
        </a>
      );
    }

    return (
      <div className="dropdown">
        <DropdownItem onClick={() => Dropitemclick(props.number, 0)}>N/A Service</DropdownItem>
        <DropdownItem onClick={() => Dropitemclick(props.number, 1)}>Time Service</DropdownItem>
        <DropdownItem onClick={() => Dropitemclick(props.number, 2)}>Youtube Service</DropdownItem>
        <DropdownItem onClick={() => Dropitemclick(props.number, 3)}>weather Service</DropdownItem>
        <DropdownItem onClick={() => Dropitemclick(props.number, 4)}>Reddit Service</DropdownItem>
        <DropdownItem onClick={() => Dropitemclick(props.number, 5)}>Reddit2 Service</DropdownItem>
        <DropdownItem onClick={() => Dropitemclick(props.number, 6)}>Reddit3 Service</DropdownItem>
      </div>
    );
  }
 return (App2());
}


export default App;

जैसा कि आप देख सकते हैं, मैंने यह देखने के लिए विभिन्न चीजों की कोशिश की कि क्या मैं उन्हें बदल सकता हूं, मैंने इसकी योजना के अनुसार मुझे उम्मीद थी कि "टाइम विजेट" बटन पर क्लिक करते समय मैं राज्य को संशोधित करूंगा और प्रिंट करूंगा।

दुख की बात है कि यह कुछ नहीं करता है। यहाँ सिर्फ मामले में मेरे index.js की सामग्री है।

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:
reportWebVitals();

मुझे यकीन है कि यह कुछ गूंगा है लेकिन मैं फंस गया हूं और नहीं जानता कि कैसे आगे बढ़ना है।

संपादित करें: मुझे पता चला कि यह संभवतः रेंडर के कारण था, लेकिन मुझे नहीं पता कि संपादन 2 को कैसे ठीक किया जाए: बस मामले में, मैं अपना .css जोड़ूंगा

body {
  margin: 0;
  background: #151616;
  font-family: roboto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}


:root {
  --bg:  #242526;
  --bg-accent: #484a4d;
  --text-color: #dadce1;
  --nav-size: 280px;
  --border: 1px solid #474a4d;
  --border-radius: 8px;
  --speed: 500ms;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: var(--text-color);
  text-decoration: none;;
}

अधिक परीक्षण के बाद, ऐसा लगता है कि या तो प्रदर्शन नहीं बदल रहा है (लेकिन बटन पर क्लिक करने से दृश्य प्रभाव पड़ता है इसलिए संभावित नहीं है) या वास्तव में कक्षा हमेशा रीसेट हो जाती है।

-2
Aldric Liottier 29 नवम्बर 2020, 18:51

2 जवाब

सबसे बढ़िया उत्तर

class WidgetStatus के अलावा जो extend Component होना चाहिए क्योंकि WidgetStatus राज्य रखता है - जैसा कि रॉन के उत्तर में चर्चा की गई है, आप सीधे इसके राज्य को बदल रहे हैं:

setState(Num, choice) {
  this.state[Num] += choice;
}

प्रतिक्रिया में सीधे राज्य को बदलना एक बड़ी संख्या नहीं है।

आपको इसके बजाय setState() का उपयोग करना चाहिए था:

setState(Num, choice) {
  this.setState(previousState => ({ [Num]: previousState[Num] + choice }));
}

संपादित करें

<DropdownItem /> घटकों में अभी-अभी onClick={Dropitemclick(props.number, [0-6])} प्रॉप्स पर ध्यान दिया। इन कार्यों को प्रस्तुत करने पर तुरंत कॉल किया जाएगा, और Dropitemclick() अपेक्षित फ़ंक्शन वापस नहीं करता है।

onClick अधिकतम एक पैरामीटर के साथ कॉलबैक की अपेक्षा करता है: event। जब आप किसी onClick प्रोप के साथ किसी चीज़ पर क्लिक करते हैं, तो वह प्रोप event ऑब्जेक्ट के साथ उसमें दिए गए फ़ंक्शन को सक्रिय कर देता है। अब आप जो कर रहे हैं, वह फ़ंक्शन के बजाय onClick पर प्रत्येक Dropitemclick() फ़ंक्शन के गणित मान को पास कर रहा है।

ऐसा करने का प्रयास करें:

<DropdownItem onClick={() => Dropitemclick(props.number, 0)}>N/A Service</DropdownItem>
<DropdownItem onClick={() => Dropitemclick(props.number, 1)}>Time Service</DropdownItem>
<DropdownItem onClick={() => Dropitemclick(props.number, 2)}>Youtube Service</DropdownItem>
<DropdownItem onClick={() => Dropitemclick(props.number, 3)}>weather Service</DropdownItem>
<DropdownItem onClick={() => Dropitemclick(props.number, 4)}>Reddit Service</DropdownItem>
<DropdownItem onClick={() => Dropitemclick(props.number, 5)}>Reddit2 Service</DropdownItem>
<DropdownItem onClick={() => Dropitemclick(props.number, 6)}>Reddit3 Service</DropdownItem>

संपादित करें २

मैंने इसे काम किया, लेकिन बहुत सारे कोड को फिर से लिखना पड़ा।

  1. DropdownItem के onClick प्रोप को <a> को इस तरह पास करना चाहिए था:

    <a onClick={props.onClick}>
      ...
    </a>
    
  2. यह नहीं है कि आपको किसी घटक को कैसे प्रस्तुत करना चाहिए:

    const statwid = new WidgetStatus();
    

    आपको इसे React.createElement(), या JSX में उपयोग करना चाहिए। किसी भी स्थिति में, आपको इसके तरीकों, जैसे statwid.setPOLState() को कॉल नहीं करना चाहिए।

  3. यह राज्य प्रबंधन को भी थोड़ा मुश्किल बना देता है, क्योंकि आप App घटक में Dropitemclick() फ़ंक्शन के माध्यम से परिवर्तन कर रहे हैं, लेकिन WidgetStatus में आयोजित स्थिति को बदलना चाहते हैं। इसलिए मैंने राज्य को WidgetStatus घटक से App घटक में स्थानांतरित कर दिया, क्योंकि App दोनों का सामान्य पूर्वज है।

    अपने राज्य को प्रारंभ करें, जैसे:

    const [choices, setChoices] = useState({
     "4766":0,
     "4767":0,
     "4768":0,
     "4769":0,
     "4770":0,
     "4771":0,
    });
    

    और हर बार जब आप राज्य के कुंजी-मूल्य जोड़े में से किसी एक को बदलना चाहते हैं:

    setChoices(prevState => ({
      ...prevState,
      [numNav]: numitem
    }));
    
  4. अंत में, राज्य को WidgetStatus घटक से दूर ले जाकर, हम कर सकते हैं

    1. इसे विस्तृत करें PureComponent
    2. render() को छोड़कर इसके सभी कार्यों को हटा दें - और वैसे render() को कोई पैरामीटर नहीं लेना चाहिए
    3. if-else स्टेटमेंट में this.state[Num] को this.props.choice से बदलें।

    अंत में, App2 पंक्तियों के साथ:

    <div>{statwid.render("4766")}</div>
    

    के साथ प्रतिस्थापित किया जाना चाहिए:

    <WidgetStatus choice={choices["4766"]} />
    

    choices स्थिति से WidgetStatus' choice प्रोप में उचित मान पास करने के लिए।

1
rateLess 29 नवम्बर 2020, 21:21

PureComponent का उपयोग तब किया जाता है जब राज्य बदलने पर घटक को फिर से प्रस्तुत नहीं करना चाहिए। यदि आप चाहते हैं कि आपका घटक राज्य के आधार पर पुन: प्रस्तुत करे, तो WidgetStatus को PureComponent के बजाय घटक का विस्तार करना चाहिए।

0
Ron 29 नवम्बर 2020, 19:00