时间戳

首页 > 解决方案 > 为子组件传递的函数在带有 Typescript 的 ReactJS 中不起作用

reactjs - 为子组件传递的函数在带有 Typescript 的 ReactJS 中不起作用

问题描述

我正在将一个函数从父组件传递给子组件，该函数用于更新状态父组件中的值。通行证工作得很好，在子组件中我可以访问该函数，但是当我尝试更改时，当我单击按钮并调用“handleAddClass”函数时，值不会改变。发送到 API 的数据也可以正常工作。

父项中的 h1 {setupProgressTeacher.classesByTeacher} /h1 在子项中更新值时不会更改。

父组件

import React, { useLayoutEffect, useCallback, useState, useContext } from 'react';
import { Container } from './styled';
import Navbar from '../../components/NavBar';
import AddClass from '../TeacherSetup/addclass';
import api from '../../services/api';

interface TeacherSetupState {
  classesByTeacher: number;
}

const Dashboard: React.FC = () => {

  const [setupProgressTeacher, setSetupProgressTeacher] = useState<TeacherSetupState>(() => {

    const classesByTeacher = 1;

    return { classesByTeacher } as TeacherSetupState;
  });


  const updateStateProgress = useCallback((classesByTeacher: number) => {
    setSetupProgressTeacher({ classesByTeacher });
  }, []);


  useLayoutEffect(() => {

    async function fetchData() {
      const token = localStorage.getItem('@Ensae:token');

      const response = await api.get('/class/classbyteacher', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });

    }
    fetchData();

  }, []);


  return (
    <Container>
      <Navbar />

      <h1>{setupProgressTeacher.classesByTeacher}</h1>
      <AddClass setProgress={(({ classesByTeacher: any }) => updateStateProgress)} />

      {/* <AddSubject /> */}
    </Container >

  );
};

export default Dashboard;

子组件

import React, { useRef, useCallback } from 'react';
import { Content } from './styled';
import { Form } from '@unform/web';
import api from '../../services/api';
import { SiGoogleclassroom } from 'react-icons/si';
import { FormHandles } from '@unform/core';
import Input from '../../components/Form/input';
import Button from '../../components/Button';


interface AddClassData {
  class_name: string;
}

interface TeacherSetupState {
  setProgress: ({ classesByTeacher }: { classesByTeacher: any }) => void;
}

const AddClass: React.FC<TeacherSetupState> = (props) => {
  const formRef = useRef<FormHandles>(null);


  const handleAddClass = useCallback(async (data: AddClassData) => {

    const userStoraged = localStorage.getItem('@Ensae:user');

    let userObject;

    if (typeof userStoraged === 'string') {
      userObject = JSON.parse(userStoraged);
    }

    const dataForApi = {
      class_name: data.class_name,
      lesson_frequency: "Semanal",
      teacher_id: userObject.id,
    }
    try {

      await api.post('/class', dataForApi);



    } catch (err) {

    }

    props.setProgress({ classesByTeacher: 4 });

  }, [props]);

  return (
    <Content>
      <h2>Agora que fez o primeiro login, está na hora de criar uma turma</h2>
      <Form ref={formRef} onSubmit={handleAddClass}>

        <div className="inputClassName" >
          <Input name="class_name" className="inputAddClass" icon={SiGoogleclassroom} placeholder="O nome da turma" />

          <Button type="submit">Continuar</Button>
        </div>
      </Form>
    </Content>
  );
};

export default AddClass;

标签： reactjstypescript

解决方案

问题是这里的这一行：

<AddClass setProgress={(({ classesByTeacher: any }) => updateStateProgress)} />

setProgress是一个函数，它接受一个参数，该参数是一个包含classesByTeacher但不使用该参数的对象。

你想用那个参数打电话。 updateStateProgress请注意，这({ classesByTeacher: any }) =>实际上意味着我们将属性的值重命名为在解构它时classesByTeacher调用的变量any，而不是我们在注释类型。

<AddClass 
   setProgress={({ classesByTeacher }) => updateStateProgress(classesByTeacher)}
/>

您也可以只传递updateStateProgess函数，但您需要相应地更改AddClass's props 的接口。

推荐阅读