react-remensx-firebase 프로젝트에서 기능 구성요소에 클래스 구성요소를 다시 쓰는 중

react-remensx-firebase 프로젝트에서 기능 구성요소에 클래스 구성요소를 다시 쓰는 중

나는 이 부품을 다시 만들고 있다.https://github.com/ayush221b/MarioPlan-react-redux-firebase-app/blob/master/src/Components/projects/CreateProject.js

https://github.com/ayush221b/MarioPlan-react-redux-firebase-app/blob/master/src/store/actions/projectActions.js

그러나 mapStateToProps 및 mapDispatchToProps를 다시 쓰는 방법을 모르겠다.

오류는 다음과 같다.

FirebaseError:잘못된 데이터와 함께 호출된 addDoc() 함수.문서 필드는 비워 둘 수 없다(문서 프로젝트에서 필드 ""에서 발견됨/5to35).LFKROA5aKMXpjqy)

프로젝트가 파견되지 않은 것 같소?

import  {Component ,useState}  from 'react'
import  {connect} from 'react-redux'
import  {createProject} from '../../store/actions/projectActions'
import { useForm } from "react-hook-form";
import { Redirect } from 'react-router-dom'



const CreateProject = (props) => {

    const [state, setState] = useState({
        title: "",
        content: ""
      });

    const handleChange = event => {
        setState({ ...state, [event.target.name]: event.target.value });
      };


    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(state);
        props.createProject(state);
        props.history.push('/');
      }

    const { auth } = props;
    return (
        <div className="container">
        <form className="white" onSubmit={handleSubmit}>
          <h5 className="grey-text text-darken-3">Create a New Project</h5>
          <div className="input-field">
            <input type="text" id='title' onChange={handleChange} />
            <label htmlFor="title">Project Title</label>
          </div>
          <div className="input-field">
            <textarea id="content" className="materialize-textarea" onChange={handleChange}></textarea>
            <label htmlFor="content">Project Content</label>
          </div>
          <div className="input-field">
            <button className="btn pink lighten-1">Create</button>
          </div>
        </form>
      </div>
    )
}

const mapDispatchToProps = (dispatch) => {
    console.log("a"+dispatch);
    return {
        createProject: (project) => dispatch(createProject(project))
    }
}

const mapStateToProps = (state) =>{
    return{
      auth: state.firebase.auth
    }
  }
  

export default connect(mapStateToProps,mapDispatchToProps)(CreateProject)

기능 구성 요소에서 "useSelector"와 같은 후크를 사용하여 저장소 상태를 가져올 수 있음

const firebase = useSelector(state => state.firebase) 

및 "Dispatch"를 사용하여 작업 트리거

const dispatch = useDispatch()


<button  onClick={() => dispatch({ type: 'GET_DATA' })} >Click me</button>

수입하는 것을 잊지 마라

import { useSelector, useDispatch } from 'react-redux'

문제:실종name입력에 대한 속성

FirebaseError:잘못된 데이터와 함께 호출된 addDoc() 함수.문서 필드는 비워 둘 수 없다(문서 프로젝트에서 필드 ""에서 발견됨/5to35).LFKROA5aKMXpjqy)

이 오류는 아무 관련이 없다.mapStateToProps당신은 빈 키로 물체를 통과함으로써 이 테스트에 실패하고 있다.

{
  title: "Some Title", 
  content: "some content",
  '': "some value"
}

그럼 그 빈 열쇠는 어디서 온 거지?음, 당신은 Dynamic Key로 상태에서의 값을 설정하고 있다.event.target.name.

const handleChange = (event) => {
  setState({
    ...state, 
    [event.target.name]: event.target.value
  });
};

변경 시input또는 그textarea뭐가event.target.name코드 좀 봐

<input type="text" id="title" onChange={handleChange} />

이름 속성은 없어!

A) A를 추가하십시오.name에서 업데이트하려는 속성에 해당하는 각 입력에state.

<input type="text" id="title" name="title" onChange={handleChange} />

또는 B) 변경setState사용하다event.target.id, 이미 설정된 .

const handleChange = (event) => {
  setState({
    ...state,
    [event.target.id]: event.target.value
  });
};

B) 전에 하던 일이 그런 것 같으니까 추천한다.

리듀렉스 후크

환원 고리와 통합하는 것은 매우 간단하다.처리하는 것보다 쉽다.connect내 생각에는.

접근auth셀렉터에게서.

const auth = useSelector((state) => state.firebase.auth);

부르다useDispatch액세스에 구성 요소의 최상위 수준 추가dispatch.

const dispatch = useDispatch();

당신 안에handleSubmit, calldispatch당신의 행동 창조자의 결과와 함께.

dispatch(createProject(state));

전체 코드

const CreateProject = (props) => {
  const auth = useSelector((state) => state.firebase.auth);

  const dispatch = useDispatch();

  const [state, setState] = useState({
    title: "",
    content: ""
  });

  const handleChange = (event) => {
    setState({ ...state, [event.target.id]: event.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(state);
    dispatch(createProject(state));
    props.history.push("/");
  };

  return (
    <div className="container">
      <form className="white" onSubmit={handleSubmit}>
        <h5 className="grey-text text-darken-3">Create a New Project</h5>
        <div className="input-field">
          <input type="text" id="title" onChange={handleChange} />
          <label htmlFor="title">Project Title</label>
        </div>
        <div className="input-field">
          <textarea
            id="content"
            className="materialize-textarea"
            onChange={handleChange}
          />
          <label htmlFor="content">Project Content</label>
        </div>
        <div className="input-field">
          <button className="btn pink lighten-1">Create</button>
        </div>
      </form>
    </div>
  );
};

참조URL: https://stackoverflow.com/questions/66427578/i-am-rewriting-a-class-component-to-a-functional-component-in-react-redux-fireba