将setState从useState钩子中作为防火墙函数或任何其他组件中的支柱传递

Question

目前没有遇到任何问题，我只是想知道将setState传递给函数或组件的最佳实践是什么，特别是在另一个文件上声明的firebase函数，或者设计为可重用的表单。

这是一个函数来自我的firebase文件

`

export function getResumes({ applicationtState: applicationState }) {
  onSnapshot(
    query(collection(db, 'applications'), orderBy('timestamp', 'desc')),
    (querySnapshot) => {
      const arrays = []
      querySnapshot.forEach((snap) => {
        arrays.push(snap.data())
      
      })
      applicationState(arrays)
   
    }
  )
}

`

这就是我如何调用我的简历文件的函数。

`

const [application, setApplication] = useState([])

useEffect(() => {
 
 getResumes({ applicationtState: setApplication })

  }, [])

`

在另一个实例中，我有一个表单组件，它是我在多个页面上调用的。

`

function EducationBox({
  highSchoolState,
  highSchoolValue,
  highSchoolCourseOfStudyState,
  highSchoolCourseOfStudyValue,
  highSchoolGraduateState,

  highSchoolNumberOfYearsCompletedState,
  highSchoolNumberOfYearsCompletedValue,
  highSchoolHonorsReceivedState,
  highSchoolHonorsReceivedValue,
  collegeState,
  collegeValue,
  collegeCourseOfStudyState,
  collegeCourseOfStudyValue,
  collegeGraduateState,
  //   collegeGraduateValue,
  collegeNumberOfYearsCompletedState,
  collegeNumberOfYearsCompletedValue,
  collegeHonorsReceivedState,
  collegeHonorsReceivedValue,
  GradState,
  GradValue,
  GradCourseOfStudyState,
  GradCourseOfStudyValue,
  GradGraduateState,
  //   GradGraduateValue,
  GradNumberOfYearsCompletedState,
  GradNumberOfYearsCompletedValue,
  GradHonorsReceivedState,
  GradHonorsReceivedValue,
  tradeState,
  tradeValue,
  tradeCourseOfStudyState,
  tradeCourseOfStudyValue,
  tradeGraduateState,
  //   tradeGraduateValue,
  tradeNumberOfYearsCompletedState,
  tradeNumberOfYearsCompletedValue,
  tradeHonorsReceivedState,
  tradeHonorsReceivedValue,
}) {
  return (
    <div className=" flex w-full grid-rows-4 flex-col rounded-[20px] outline outline-2 outline-[#b5b5b5]">
      <SchoolItem
        SchoolState={highSchoolState}
        SchoolValue={highSchoolValue}
        CourseOfStudyState={highSchoolCourseOfStudyState}
        SchoolCourseOfStudyValue={highSchoolCourseOfStudyValue}
        SchoolGraduateState={highSchoolGraduateState}
        title={'High School'}
        NumberOfYearsCompletedState={highSchoolNumberOfYearsCompletedState}
        NumberOfYearsCompletedValue={highSchoolNumberOfYearsCompletedValue}
        HonorsReceivedState={highSchoolHonorsReceivedState}
        HonorsReceivedValue={highSchoolHonorsReceivedValue}
      />
      <SchoolItem
        SchoolState={collegeState}
        SchoolValue={collegeValue}
        CourseOfStudyState={collegeCourseOfStudyState}
        SchoolCourseOfStudyValue={collegeCourseOfStudyValue}
        SchoolGraduateState={collegeGraduateState}
        title={'College'}
        NumberOfYearsCompletedState={collegeNumberOfYearsCompletedState}
        NumberOfYearsCompletedValue={collegeNumberOfYearsCompletedValue}
        HonorsReceivedState={collegeHonorsReceivedState}
        HonorsReceivedValue={collegeHonorsReceivedValue}
      />
      <SchoolItem
        SchoolState={GradState}
        SchoolValue={GradValue}
        CourseOfStudyState={GradCourseOfStudyState}
        SchoolCourseOfStudyValue={GradCourseOfStudyValue}
        SchoolGraduateState={GradGraduateState}
        title={'Grad School'}
        NumberOfYearsCompletedState={GradNumberOfYearsCompletedState}
        NumberOfYearsCompletedValue={GradNumberOfYearsCompletedValue}
        HonorsReceivedState={GradHonorsReceivedState}
        HonorsReceivedValue={GradHonorsReceivedValue}
      />
      <SchoolItem
        SchoolState={tradeState}
        SchoolValue={tradeValue}
        CourseOfStudyState={tradeCourseOfStudyState}
        SchoolCourseOfStudyValue={tradeCourseOfStudyValue}
        SchoolGraduateState={tradeGraduateState}
        title={'Trade School'}
        NumberOfYearsCompletedState={tradeNumberOfYearsCompletedState}
        NumberOfYearsCompletedValue={tradeNumberOfYearsCompletedValue}
        HonorsReceivedState={tradeHonorsReceivedState}
        HonorsReceivedValue={tradeHonorsReceivedValue}
      />
    </div>
  )
}
function SchoolItem({
  SchoolState,
  SchoolValue,
  CourseOfStudyState,
  SchoolCourseOfStudyValue,
  SchoolGraduateState,
  title,
  NumberOfYearsCompletedState,
  NumberOfYearsCompletedValue,
  HonorsReceivedState,
  HonorsReceivedValue,
}) {
  return (
    <div className=" flex w-full grid-cols-6 flex-col  items-center justify-center px-10 text-center md:flex-row">
      <h4 className=" flex text-lg font-bold"> {title}</h4>
      <div className=" mx-3 w-full">
        <TextInput
          value={SchoolValue}
          widthPercentage="w-full"
          placeHolder="School Name"
          onChange={(text) => {
            SchoolState(text.target.value)
          }}
        />
      </div>
      <div className=" mx-3 w-full">
        <TextInput
          widthPercentage="w-full"
          placeHolder="Course Of Study"
          onChange={(text) => {
            CourseOfStudyState(text.target.value)
          }}
          value={SchoolCourseOfStudyValue}
        />
      </div>
      <div className=" mx-3 w-full">
        <h5>Graduated?</h5>
        <RadioButton answerState={SchoolGraduateState} />
      </div>

      <div className=" mx-3 w-full">
        <TextInput
          value={HonorsReceivedValue}
          widthPercentage="w-full"
          placeHolder="Honors Received"
          onChange={(text) => {
            HonorsReceivedState(text.target.value)
          }}
        />
      </div>
      <div className=" mx-3 w-full">
        <TextInput
          value={NumberOfYearsCompletedValue}
          widthPercentage="w-full"
          placeHolder="# of years Completed"
          onChange={(text) => {
            NumberOfYearsCompletedState(text.target.value)
          }}
        />
      </div>
    </div>
  )
}

export default EducationBox

`

我只想知道什么是最佳实践。请帮帮忙！

Answer 1

你可以得到承诺的帮助，并使用类似的东西。这样，您的功能可以变得更可重用，不能依赖于任何args或状态:-

 export function getResumes() {
  return new Promise((resolve, reject) => {
    onSnapshot(
      query(collection(db, 'applications'), orderBy('timestamp', 'desc')),
      (querySnapshot) => {
        const arrays = []
        querySnapshot.forEach((snap) => {
          arrays.push(snap.data())
        })
        resolve(arrays)
      }
    )
  })
}

const [application, setApplication] = useState([])

useEffect(() => {
  getData()
}, [])

const getData = async () => {
  try {
    const resumes = await getResumes()
    setApplication(resumes)
  } catch (err) {
    console.log("error", err);
  }
}