Я использую antd deign, чтобы показать опцию select, но select не может прочитать предоставленный идентификатор, а также не могу обновить onChange

Question

Я использую antd deign, чтобы показать опцию select, но select не может прочитать предоставленный идентификатор и также не могу обновить onChange.

import React from "react";


const data = {
  orgName: "",
  orgRegNo: "",
  orgType: "",

  orgTypes: [
    { id: "1", name: "Vendor" },
    { id: "2", name: "Supplier" },
    { id: "3", name: "Vendor and Supplier" }
  ]
};



export const MyContextTSX = React.createContext(data);

const Store = (props: any) => {
  return (
    <MyContextTSX.Provider value={data}>{props.children}</MyContextTSX.Provider>
  );
};

export default Store;

// Следующая страница регистрации в React

const signinData = useContext(MyContextTSX);


const [values, setValues] = useState(signinData);

<Select
                  id={values.orgTypes.id}  //shows error while showing id
                  // name={values.orgTypes.name}
                  defaultValue="Choose"
                  style={{ width: 150 }}
                  onChange={(value: any) => //cant perform onChange
                    setValues({ ...value, name: value })
                  }
                >
                  {values.orgTypes.map((option: any) => (
                    <Option
                      key={option.id}
                      value={option.name}
                      // onChange={handleChange}
                    >
                      {option.name}
                    </Option>
                  ))}
                </Select>

Я использую antd deign, чтобы показать опцию select, но select не может прочитать предоставленный идентификатор и также не могу обновить onChange.

Ссылка на CodeSandbox

Answer 1

В вашем коде мало проблем.

Во-первых, , вы пытаетесь получить доступ к id из orgTypes, который является массивом. Вместо этого вы можете определить нормальный идентификатор.

Во-вторых , вам нужно иметь contextProvider, обертывающий ваш компонент приложения

Третий . Вам необходимо обновить состояние в правильном формате, чтобы вы обновляли не данные, а выбранное значение. Для этого вам нужно иметь состояние для выбранного значения

Relavant code

index.js

ReactDOM(
  <Store>
    <App />
  </Store>,
  document.getElementById("root")
);

useForm.js

import { useContext, useState } from "react";

import { MyContextTSX } from "./Store";

const useForm = ({ callback }) => {
  const values = useContext(MyContextTSX);
  const [selected, setSelected] = useState({});

  return { values, selected, setSelected };
};

export default useForm;

Register.js

const Register = () => {
  const { values, selected, setSelected } = useForm({});
  return (
    <React.Fragment>
      <Select
        id={"select"} //shows error here
        defaultValue="Choose"
        style={{ width: 150 }}
        onChange={(
          value: any //what to do here ?
        ) => setSelected(selected)} //what to do here ?
      >
        {values.orgTypes.map((option: any) => (
          <Option key={option.id} value={option.name}>
            {option.name}
          </Option>
        ))}
      </Select>
      <button onClick={() => console.log(values.orgTypes)}>Test</button>
    </React.Fragment>
  );
};

Answer 2

Есть много проблем с вашим кодом:

id={values.orgTypes.id} // orgTypes is an array, use values.orgTypes[0].id

---

onChange={(
  value: any // value is the Select.Option value
  ) => setValues({ ...value, name: value })} // What exatcly you trying to do here?

Более того, вы не указываете типы (и используете Typescript).

Проверьте этот рабочий пример (Javascript):

const data = {
  orgName: '',
  orgRegNo: '',
  orgType: '',

  orgTypes: [
    { id: '1', name: 'Vendor' },
    { id: '2', name: 'Supplier' },
    { id: '3', name: 'Vendor and Supplier' }
  ]
};

const MyContextTSX = React.createContext(data);
function Signup() {
  const signinData = useContext(MyContextTSX);
  const [selected, setSelected] = useState();

  return (
    <div>
      <h1>Selected: {selected}</h1>
      <Select
        defaultValue="Choose"
        style={{ width: 150 }}
        onChange={value => setSelected(value)}
      >
        {signinData.orgTypes.map(option => (
          <Select.Option key={option.id} value={option.name}>
            {option.name}
          </Select.Option>
        ))}
      </Select>
    </div>
  );
}

Демонстрация: