मैं निम्नलिखित के रूप में एक साधारण लूप के माध्यम से 3 x 3 तालिका बना रहा हूं:

  React.useEffect(() => {
    const _array = [];
    let i = -1;
    for (let c = 1; c < 4; c++) {
      for (let r = 1; r < 4; r++) {
        i++;
        _array.push(
          <div
            key={`x${c}x${r}`}
            className={`x${c}x${r}`}
            onClick={() => console.log(i)}
          >
            {i}
          </div>
        );
      }
    }
    setArray(_array);
  }, []);

प्रत्येक <div> में console.log(i) 8 देता है, हालांकि {i} हर बार सही संख्या प्रिंट करता है।

मैं इस लूप का उपयोग करके प्रत्येक div के अंदर सही i को कैसे कोडित कर सकता हूं?

पुन: पेश करने के लिए आप CodeSandbox पर पूरा कोड देख सकते हैं।

1
Hypothesis 4 पद 2020, 21:28

1 उत्तर

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

आपको रिएक्ट तत्वों को राज्य में संग्रहीत नहीं करना चाहिए, केवल डेटा जो बाद में प्रस्तुत किया जा सकता है।

पुराने रिएक्ट डॉक्स, state में केवल आपके UI की स्थिति का प्रतिनिधित्व करने के लिए आवश्यक न्यूनतम डेटा होना चाहिए। जैसे, इसमें रिएक्ट घटक नहीं होने चाहिए। उन्हें render() में अंतर्निहित props और state के आधार पर बनाएं।

function App() {
  const [array, setArray] = React.useState([]);

  React.useEffect(() => {
    const _array = [];
    let i = -1;
    for (let c = 1; c < 4; c++) {
      for (let r = 1; r < 4; r++) {
        i++;
        _array.push({ id: `x${c}x${r}`, content: i });
      }
    }
    setArray(_array);
  }, []);

  return (
    <div className="containter">
      <div className="game">
        {array.map((item) => (
          <button
            key={item.id}
            className={item.id}
            onClick={() => console.log(item.content)}
          >
            {item.content}
          </button>
        ))}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
1
Zsolt Meszaros 4 पद 2020, 18:45