Saya mulai menggunakan react-router dan saya menemukan bahwa saya dapat meneruskan 'alat peraga' di komponen Tautan sehingga beberapa nilai dapat diteruskan ke komponen lain. Saya mengirim komponen yang disebut 'nilai' di dalam tombol yang saya gunakan, namun dalam komponen yang menerima parameter itu menunjukkan pesan kesalahan dengan pesan 'Objek mungkin nol atau tidak terdefinisi'.

Ini kode saya:

Di mana saya mengirim data:

<Container placeholder>
            <Segment>
            <Form>
                <Form.Field>
                    <label>Correo</label>
                    <input placeholder='Ingresa tu correo' name='nombre' onChange={actualizarUser}/>
                </Form.Field>
                <Form.Field>
                    <label>Contraseña</label>
                    <input placeholder='Ingresa tu contraseña' name='password' onChange={actualizarUser}/>
                </Form.Field>

                <Link to={{ pathname:'/init/home', state:{ value: token } }}> // Here I'm sending the props to the next component
                    <Button type='submit'>SubmitNuevo</Button>
                </Link>
                <Button type='submit' onClick={sendInfo}>Prueba</Button>
            </Form>
            </Segment>
        </Container>

Dan komponen tempat saya menerima location.state

const Logged: React.FC<{}> = () => {

const [open, setOpen] = useState(false);  
const location = useLocation(); // Here I'm using useLocation to capture the props I sent
const [token, setToken] = useState('');

useEffect(() => {
        console.log(location.state);
        setToken(location.state.value); // Here is were I'm getting the error message
        console.log(token);
});

const handleOpen = () => {
    setOpen(true);
}

const handleClose = () => {
    setOpen(false);
}

return(<div>

    </div>
);

Saya juga mencoba mengelolanya sebagai alat peraga, namun ada kesalahan lain yang menunjukkan seolah-olah lokasi tidak dikenali:

Berikut adalah informasi dari opsi kedua tentang di mana saya menggunakan Rute dan alat peraga untuk menyampaikan informasi

function App() {
  return (
    <div className="App">
      <Navbar bg="dark"  variant="dark">
        <Navbar.Brand href="#home">
          Micrin
        </Navbar.Brand>
    </Navbar>
    <Router>
        <Switch>
          <Route path='/login' component={InicioSesion} />
          <Route path='/register' component={Registro} />
          <Route path='/recover' component={RecuperarCuenta}/>
          <Route path='/init/home' exact component={Logged} />
          <Route path='/init/stock' exact component={Logged}  />
          <Route path='/init/menu' exact component={Logged} />
          <Route path='/init/sales' exact component={Logged} />
          <Route path='/init/market' exact component={Logged} />
          <Route path='/' component={MainPage} />
        </Switch>
    </Router>
    </div>
  );
}

Dan rendering komponen dengan alat peraga yang saya kirim

const Logged: React.FC<{}> = (props) => {
    const [open, setOpen] = useState(false);  
    const [token, setToken] = useState('');

useEffect(() => {
        console.log(props.location.state);
        setToken(props.location.state.value); // Shows error message 'Property location does not exist on type {children?: ReactNode}'
        console.log(token);
});

const handleOpen = () => {
    setOpen(true);
}

const handleClose = () => {
    setOpen(false);
}

return(
    <div></div>
);

Terima kasih untuk bantuannya

3
Andrés F Ariza Calderón 15 Mei 2020, 23:51

1 menjawab

Jawaban Terbaik

Kesalahan kedua yang Anda dapatkan adalah kesalahan TypeScript. Itu terjadi karena TypeScript tidak mengetahui antarmuka alat peraga Anda.

Saat Anda mendefinisikan komponen Anda, Anda memberi tahu TypeScript bahwa itu adalah komponen Fungsional Bereaksi dengan menulis:

const Logged: React.FC<{}>

Logged adalah variabel bertipe React.FC. React.FC adalah jenis generik. Itu berarti bisa mengambil argumen. Argumen ini adalah jenis props yang diterima komponen Anda.

Di sini, Anda memberi tahu TypeScript bahwa komponen Anda tidak menerima prop sama sekali: React.FC<{}>. Jadi TypeScript mengharapkan Logged menjadi komponen fungsional React dasar (jadi hanya menerima, akhirnya beberapa anak).

Inilah sebabnya mengapa TypeScript mengeluh ketika Anda mencoba untuk mendapatkan location dari props: TypeScript tidak berharap memiliki prop seperti itu:

enter image description here

Anda perlu memberi tahu TypeScript bahwa komponen ini menerima prop lokasi. Anda dapat melakukannya dengan membuat antarmuka seperti ini:

interface Props {
  // your props here
  location;
}

const Logged: React.FC<Props> = ({ location }) => {
  // your code
}

(catatan: Saya juga menggunakan props destructuring karena menurut saya itu membuat kode lebih bersih, tetapi jangan ragu untuk menggunakan props langsung ke komponen Anda)

Tapi di sini, saya baru saja memberi tahu TypeScript bahwa ada variabel location, tetapi saya tidak secara eksplisit mengatur tipenya.

Dalam kasus Anda, ini sedikit lebih rumit karena React Router menyuntikkan alat peraga ini untuk Anda. Jadi dalam hal ini Anda dapat memperluas antarmuka Props Anda seperti ini:

import React, { useEffect, useState } from 'react';

import { StaticContext } from 'react-router';
import { RouteComponentProps } from 'react-router-dom';

type LocationState = {
  value: string;
};

interface Props extends RouteComponentProps<{}, StaticContext, LocationState> {
  // Here you can define the other props of your component
  // if needed
}

const Logged: React.FC<Props> = ({ location }) => {
  const [open, setOpen] = useState(false);
  const [token, setToken] = useState('');

  useEffect(() => {
    setToken(location.state.value);
  });

  return <div>Hello</div>;
};

export default Logged;

Dan sekarang, karena TypeScript mengetahui jenis properti Anda, IDE Anda juga dapat melengkapi secara otomatis: masukkan deskripsi gambar di sinimasukkan deskripsi gambar di siniReact Typescript: tambahkan status lokasi untuk bereaksi komponen router

Dan beberapa tutorial "intro to TypeScript + react" seperti ini: https://alligator.io/react/typescript-with-react/

Karena Anda akan mendapatkan banyak kesalahan seperti ini dan ketika Anda tahu cara membacanya, itu tidak terlalu sulit untuk diselesaikan.

Saya pikir kesalahan pertama Anda juga terkait dengan beberapa jenis yang hilang tetapi saya tidak dapat memahami masalah dan alasan yang tepat dengan apa yang Anda bagikan di sini.

2
Hugo 15 Mei 2020, 22:40