Question

经过几个小时的寻找解决方案，我决定问你，希望有人能帮助我......

我建立了一个表格，在这个表格中，我有一个机构列表。它是一个注册表单。用户必须选择要订阅的机构列表。我想将所选机构的列表存储到 useContext 中。

计划是稍后使用 material-ui Stepper。第一步：机构选择第二步：选课第 3 步：填写经典表格：姓名、姓名等并提交。

我有第一个页面：

注册.js

    // I declare my contextProvider
    import RegisterContextProvider from '../../contexts/RegisterContext';
    // I declare my FORM Component
    import { RegisterForm } from '../../components/authentication/register';

    // .... many other things not important
    export default function Register() {
    return (
            <Container>
              <RegisterContextProvider>
                <RegisterForm />
              </RegisterContextProvider>
           </Container>
           );
}

我向你展示我的 RegisterContext.js

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

const initialState = {
  institutsSelected: [],
  onSelectInstitut: () => {}
};
export const RegisterContext = createContext(initialState);

const RegisterContextProvider = ({ children }) => {
  const selectedInstitutState = {
    institutsSelected: [],
    onSelectInstitut: (data) => setRegisterItemsSelected(...data)
  };
  const [RegisterItemsSelected, setRegisterItemsSelected] = useState(selectedInstitutState);
  return <RegisterContext.Provider value={RegisterItemsSelected}>{children}</RegisterContext.Provider>;
};

export default RegisterContextProvider;

现在是我尝试使用上下文的 InstitutsList.js 的摘录。

// I Import the Context
import { RegisterContext } from '../../../contexts/RegisterContext';

export default function InstitutsList() { 
// Blablabla code

// I use Context : 
const institutsSelected = useContext(RegisterContext);
// The function which cause ERROR ...
// This function have to fill the CONTEXT with the select Value.

  const handleClick = useCallback(
    (e) => {
      institutsSelected.onSelectInstitut(e.target.value);
    },
    [institutsSelected.onSelectInstitut]
  );

return (
    
    <Container>
   //  BLABLABLA CODE
        <Checkbox checked={isItemSelected} onChange={handleClick} value={institut_id} />
    </Container>
)

}

而且......当我初始化页面时：

表单正确查看。没有错误。在 Debugger Chrome -> Components 我可以看到我的 RegisterContextProvider :

现在……我选择了一个机构：

机构的ID被放...

如果我想再次选择并更改值....地狱发生了！

我是 React 的初学者，所以我还没有经验来理解为什么......一切看起来都在正确的位置。

感谢您抽出时间回复我！我真的很依赖你......你不知道我在这个问题上花了多少小时

useContext => TypeError: institutsSelected.onSelectInstitut 不是函数

0 个答案: