React Hook "useState", bir React işlevi bileşeni veya özel bir React Hook işlevi olmayan işlev "app" olarak adlandırılır

Basit bir problem için tepki kancaları kullanmaya çalışıyorum

const [personState,setPersonState] = useState({ DefinedObject });

aşağıdaki bağımlılıklar ile.

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
}

ancak yine de aşağıdaki hatayı alıyorum:

./src/App.js

Satır 7:
React Hook "useState", ne bir React işlevi bileşeni ne de özel bir React Hook işlevi tepki-kancaları / kanca kuralları olmayan "uygulama" işlevinde çağrılır

Satır 39:
'durum'
no-undef olarak tanımlanmadı

Her bir hata hakkında daha fazla bilgi edinmek için anahtar kelimeleri arayın.

Bileşen kodu aşağıdadır:

import React, {useState} from 'react'; 
import './App.css'; 
import Person from './Person/Person'; 

const app = props => { 
    const [personState, setPersonSate] = useState({ person:[ {name:'bishnu',age:'32'}, {name:'rasmi',age:'27'}, {name:'fretbox',age:'4'} ], }); 
    return (
        <div className="App"> 
            <h2>This is react</h2> 
            <Person name={personState.person[1].name} age="27"></Person>
            <Person name={personState.person[2].name} age="4"></Person> 
        </div> ); 
    };
    export default app;

Kişi bileşeni

import React from 'react'; 

const person = props => { 
    return( 
        <div>
            <h3>i am {props.name}</h3>
            <p>i am {props.age} years old</p>
            <p>{props.children}</p>
        </div> 
    )
};

export default person; 

'Uygulamayı' büyük harfle yazmayı deneyin

const App = props => {...}

export default App;

React'te, bileşenlerin büyük harfle yazılması gerekir ve özel kancaların başlaması gerekir use.

Udemy'de de aynı kursu yapıyormuşuz gibi hissediyorum.

Eğer öyleyse, sadece büyük harfle

const app

için

const App

İçin olduğu kadar yapın

export default app

için

export default App

Benim için iyi çalışıyor.

Bildiğim kadarıyla bu pakete bir linter dahildir. Ve bileşenlerin Capital karakterinden başlamasını gerektirir. Lütfen kontrol et.

Ancak benim için üzücü.

İşlev adında ilk harf büyük kullanın.

function App(){}

Const uygulaması yerine const uygulamasını kullanın

Uygulama adınızı büyük harfle yazmayı deneyin

const App = props => {...}

export default App;

Şu hatayı alıyorsunuz: "React Hook" useState ", ne bir React işlevi bileşeni ne de özel bir React Hook işlevi olmayan" App "işlevinde çağrılır"

Çözüm: Temelde işlevi büyük harfle yazmanız gerekir.

Örneğin:

const Helper =()=>{}

function Helper2(){}

işlevinizin ilk karakteri Büyük Harf olmalıdır

Ben de aynı sorunu yaşadım. "Uygulama" daki "A" harfinin büyük harfle yazılmasının sorun olduğu ortaya çıktı. Ayrıca, dışa aktarırsanız: export default App;aynı "Uygulama" adını da dışa aktardığınızdan emin olun.

Bileşenler büyük harflerle başlamalıdır. Ayrıca dışa aktarmak için satırdaki ilk harfi değiştirmeyi unutmayın!

Doğru ithalatınız var mı?

import React, { useState } from 'react';

React bileşenlerinin adları büyük harfle yazılmalı ve özel kanca işlevleri , bir react hook işlevi olarak tanımlamak için use anahtar sözcüğüyle başlamalıdır .

Öyleyse, uygulama bileşenlerinizden Uygulamaya geçiş yapın

Ben de aynı sorunu yaşadım, ancak Uygulamada değil. Özel bir sınıfım vardı, ancak işlev adını başlatmak için küçük harf kullandım ve ayrıca hatayı aldım.

İşlev adının ilk harfi ve dışa aktarma satırı CamelCase olarak değiştirildi ve hata giderildi.

benim durumumda sonuç şunun gibi bir şeydi:

function Document() {
....
}
export default Document;

bu benim sorunumu çözdü.

Çözüm basit, doğru "uygulama" ve ilk karakter büyük harfle "Uygulama" yazın.

Uygulamadan Uygulamaya büyük harf yazmak kesinlikle işe yarayacaktır.

JSX'te, küçük harfli etiket adı html yerel bileşeni olarak kabul edilir. Fonksiyonu React bileşeni olarak tanımak için tepki vermek için adı büyük harfle yazmalısınız.

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX <Foo /> expression, Foo must be in scope.

https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

Bunu değiştir

export default app;

Bununla

export default App;

İşlev adını büyük harf yapın. Bu benim için çalışıyor.

export default function App() { }

React Hook "useState" is called in function "App" which is neither a React function component or a custom React Hook function"

Aşağıdaki hata için, bileşenin ilk harfini ve ayrıca dışa aktarımı büyük harfle yazın.

const App  = props => {
...}
export default App;

Yuki'nin işaret ettiği gibi çözüm, bileşen adını büyük harfle yazmaktır. Yalnızca "varsayılan" Uygulama bileşeninin değil, tüm bileşenlerin büyük harfle yazılması gerektiğine dikkat etmek önemlidir:

const Person = () => {return ...};

export default Person;

Bu, eslint-plugin-react-hooks paketinden, özellikle RulesOfHooks.js betiği içindeki isComponentName () işlevinden kaynaklanmaktadır.

Hooks SSS'lerinden resmi açıklama :

Hatalardan kaçınmak için Hook kurallarını uygulayan bir ESLint eklentisi sağlıyoruz. "Use" ile başlayan ve hemen ardından büyük harfle başlayan herhangi bir işlevin Hook olduğunu varsayar. Bu buluşsal yöntemin mükemmel olmadığını ve bazı yanlış pozitifler olabileceğini biliyoruz, ancak ekosistem çapında bir konvansiyon olmadan Hook'ların iyi çalışmasını sağlamanın bir yolu yoktur - ve daha uzun isimler insanları Hook'ları benimsemekten veya kongreyi takip etmekten caydıracaktır.

Her şeyden önce, size durumda, sizin bileşenlerinin firstLetter büyük harfe ihtiyaç app olmalıdır App ve kişi olmalıdır Kişi .

Sorunu bulma umuduyla kodunuzu kopyalamaya çalıştım. Uygulama bileşenini nasıl çağırdığınızı paylaşmadığınız için , bunu bir soruna getirmenin yalnızca 1 yolunu görebiliyorum.

Bu, CodeSandbox'taki bağlantıdır: Geçersiz kanca çağrısı .

Neden? Aşağıdaki koddan dolayı yanlış olan:

ReactDOM.render(App(), rootElement);

Olmalıydı:

ReactDOM.render(<App />, rootElement);

Daha fazla bilgi için Rule of Hooks - React'i okumalısınız

Bu yardımcı olur umarım!

Fonksiyonel bileşen adını / React hooks özel bileşenlerini tanımlamak için Büyük harf kullanın. "const" app "sabit" Uygulama "olmalıdır.

App.js

import React, { useState } from 'react';
import { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Person from './Person/Person';

const App = props => {
  const [personState, setPersonState] = useState({
    persons : [
          {name: 'a', age: '1'},
          {name: 'b', age: '2'},
          {name: 'c', age: '3'}
    ]
  });

    return (
      <div>
     <Person name = {personState.persons[0].name} age={personState.persons[0].age}> First </Person>
     <Person name = {personState.persons[1].name} age={personState.persons[1].age}> Second </Person>
     <Person name = {personState.persons[2].name} age={personState.persons[2].age}> Third </Person>    
    );
};
export default App;

Person.js

import React from 'react';

const person = (props) => {
return (
        <div>
<p> My name is {props.name} and my age is {props.age}</p>
<p> My name is {props.name} and my age is {props.age} and {props.children}</p>
<p>{props.children}</p>
        </div>
)
};

[ReactHooks] [useState] [ReactJs]

1. Adım: src / App.js dosya adını src / app.js olarak değiştirin

Adım 2: "app.js için içe aktarımları güncelle" için "Evet" i tıklayın.

Adım-3: Sunucuyu yeniden başlatın.

Bir React fonksiyonel bileşeniyle çalışırken, bu React Hooks hatalarını önlemek için her zaman bileşen adının ilk harfini Büyük Harfte tutun.

Sizin durumunuzda, React Hook hatasını önlemek için yukarıda söylediğim gibi appdeğiştirilmesi gereken bileşeni adlandırdınız App.

        import React, { useState } from "react"

    const inputTextValue = ({ initialValue }) => {
        const [value, setValue] = useState(initialValue);
        return {
            value,
            onChange: (e) => { setValue(e.target.value) }
        };
    };

    export default () => {
        const textValue = inputTextValue("");
        return (<>
            <input {...textValue} />
        </>
        );
    }

/*"Solution I Tired Changed Name of Funtion in Captial "*/

    import React, { useState } from "react"

const InputTextValue = ({ initialValue }) => {
    const [value, setValue] = useState(initialValue);
    return {
        value,
        onChange: (e) => { setValue(e.target.value) }
    };
};

export default () => {
    const textValue = InputTextValue("");
    return (<>
        <input {...textValue} />
    </>
    );
}

Uygulama işlevinde kelimeyi yanlış yazdınız, harfi setpersonSateeksik t, bu yüzden olmalı setpersonState.

Hata :

const app = props => { 
    const [personState, setPersonSate] = useState({....

Çözüm :

const app = props => { 
        const [personState, setPersonState] = useState({....

Bunun nedeni, React Hooks için ESLint kuralıdır. Kuralın bağlantısını burada bulun:

React Hooks için ESLint kuralı

Şu an itibariyle, kural no. 44.

React bileşenleri (hem işlevsel hem de sınıf) büyük harfle başlamalıdır. Sevmek

const App=(props)=><div>Hey</div>

class App extends React.Component{
   render(){
     return <div>Hey</div>
   }
}

React, bu semantik takip ederek kullanıcı tanımlı bileşenleri tanımlar. React'in JSX dosyası, dom düğümünün nesne temsilini döndüren React.createElement işlevine aktarılır. Bu nesnenin type özelliği, bunun kullanıcı tanımlı bir bileşen mi yoksa div gibi bir dom öğesi mi olduğunu söyler. Bu nedenle bu semantiği takip etmek önemlidir

UseState hook yalnızca işlevsel bileşen (veya özel bir kanca) içinde kullanılabildiğinden, bu hatayı almanızın nedenidir çünkü react bunu ilk etapta kullanıcı tanımlı bir bileşen olarak tanımlayamaz.

useState, mantığın yeniden kullanılabilirliği ve soyutlanması için kullanılan özel kancaların içinde de kullanılabilir. Dolayısıyla, kancaların kurallarına göre, özel bir kancanın adı "kullanım" önekiyle başlamalı ve bir camelCase içinde olmalıdır.

İşlevsel bileşenler oluşturmak için ok işlevini kullanmayın.

Aşağıdaki örneklerden birini yapın:

function MyComponent(props) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
}

Veya

//IMPORTANT: Repeat the function name

const MyComponent = function MyComponent(props) { 
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
};

Sorunlarınız varsa "ref"(muhtemelen döngülerde), çözüm forwardRef()şunları kullanmaktır :

// IMPORTANT: Repeat the function name
// Add the "ref" argument to the function, in case you need to use it.

const MyComponent = React.forwardRef( function MyComponent(props, ref) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
});