मैं किसी अन्य घटक में वेरिएबल msg का पुन: उपयोग करने का प्रयास कर रहा हूं, जो संभावित रूप से उस घटक के दायरे में है जिसमें इसे घोषित किया गया है। समस्या यह है कि चर राज्य का उपयोग करता है और दोनों घटकों के लिए सुलभ होने के दायरे से ऊपर घोषित नहीं किया जा सकता है।

App घटक जो घटक का उपयोग करने का प्रयास करता है वह यह त्रुटि दिखाता है: msg is not defined

इस मुद्दे को हल करने का सबसे अच्छा समाधान क्या है?

import React, { useState } from "react";

const Test = () => {
  const [msg, setMsg] = useState(null);
  return (
    <>
      <p>state value from component: {msg}</p>
      <button onClick={() => setMsg("changed")}>change state</button>
    </>
  );
};

const App = () => {
  return (
    <div>
        {msg && ( // error here
          <p>show this</p>
        )}
      <p>some text</p>
      <Test />
    </div>
  );
};

export default App;

सुविधा के लिए यहां एक स्टैकब्लिट्ज है: https://stackblitz.com/edit/react-g16stb

यहां किसी भी प्रकार की मदद करने के लिए धन्यवाद

0
user8758206 30 पद 2020, 19:52

2 जवाब

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

आप उठाने की स्थिति के लिए माता-पिता या भाई-बहनों को वैरिएबल पास नहीं कर सकते हैं . अपने राज्य को रखने और सहारा के रूप में नीचे जाने के लिए एक सामान्य पूर्वज खोजें।

आपका कोड इस तरह दिखना चाहिए:

const Test = ({ msg,setMsg }) => {
  return (
    <>
      <p>state value from component: {msg}</p>
      <button onClick={() => setMsg("changed")}>change state</button>
    </>
  );
};

const App = () => {
  const [msg, setMsg] = useState(null);
  return (
    <div>
        {msg && (
          <p>show this</p>
        )}
      <p>some text</p>
      <Test  msg={msg} setMsg={setMsg} />
    </div>
  );
};

export default App;
2
buzatto 30 पद 2020, 19:57

ऐप घटक में msg तक पहुंचने के लिए उपरोक्त कोड से मूल घटक में पहुंचना मुश्किल है, इसलिए हमें lift up the state और ऐप में संदेश रखना होगा घटक और इसे टेस्ट घटक के प्रोप के रूप में पास करें

import React, { useState } from "react";
   const Test = ({ msg,setMsg }) => {
      return (
        <>
          <p>state value from component: {msg}</p>
          <button onClick={() => setMsg("changed")}>change state</button>
        </>
      );
    };
    
    const App = () => {
      const [msg, setMsg] = useState(null);
      return (
        <div>
            {msg && (
              <p>show this</p>
            )}
          <p>some text</p>
          <Test  msg={msg} setMsg={setMsg} />
        </div>
      );
    };
    
    export default App;
1
Bansl 30 पद 2020, 20:05