Как я могу добавить индекс в качестве параметра для использования обработчика эффекта?

Question

Ну, я пытаюсь понять, как играть с массивом в хуке useEffect.По сути, я хочу знать, как передать индекс в качестве параметра, чтобы мне не приходилось захватывать индексы вручную.

Я извлекаю некоторые данные из бэкэнда для редактирования некоторых полей формы.Поле, в котором у меня возникли проблемы, это поле, которое вы можете создать динамически.Может быть только 1 или 100.

Это компонент:

    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // So there is only one name key.
    // I need that to be dynamic. To accept as many name keys as possible.
    startupFourthStepFormActionHandler({
      products_or_services:
        [
          {
            name:
              startupProductsOrServicesInfo.productsorservices &&
              startupProductsOrServicesInfo.productsorservices[0].name,
          },
        ] || [],
    });
  }, []);


  return (
    <div>
      {productsOrServicesInputs.map((input, index) => (
        <div key={input}>
          // THESE ARE DYNAMIC INPUTS. SO THERE COULD 1 OR 100
          <FormField
            value={startupFourthStepForm.products_or_services[index].name}
          />
          // LET'S SAY THIS WAS CREATED DYNAMICALLY
          <FormField
            value={startupFourthStepForm.products_or_services[index].name}
          />
        </div>
      ))}
    </div>
  );
};

Если вы видите компонент выше, на useEffect Я делаю это:

  return startupFourthStepFormActionHandler({
      products_or_services:
        [
          {
            name:
              startupProductsOrServicesInfo.productsorservices &&
              startupProductsOrServicesInfo.productsorservices[0].name,
          },
        ] || [],
    });

Я бы хотел превратить это во что-то вроде:

  return startupFourthStepFormActionHandler({
      products_or_services:
        [
          {
            name:
              startupProductsOrServicesInfo.productsorservices &&
              startupProductsOrServicesInfo.productsorservices[INDEX].name,
          },
        ] || [],
    });

Или что-то, что позволяет мне иметь столько ключей name, сколько необходимо.Как:

  return startupFourthStepFormActionHandler({
      products_or_services:
        [Here I should grab an array of 100 hundred objects with key called name] || [],
    });

Так что я могу сделать что-то вроде: startupProductsOrServicesInfo.productsorservices[index].name

Как вы видите, у меня есть это startupProductsOrServicesInfo.productsorservices[0].name, но мне нужно, чтобы это был индекс proepr элемента в массиве,Пока это только захват индекса 0, мне нужно, чтобы этот индекс динамически захватывался.

В методе useEffect компонента вы можете увидеть это startupProductsOrServicesInfo.productsorservices, которое является вызовом API и возвращает его->

{
  "success": true,
  "productsorservices": [
    {
      "name": "Software",
    },
    {
      "name": "Hardware",
    }
  ]
}

Итак, все, что я пытаюсь сделать, это установить значение, полученное здесь от серверной части, на этом value ->

value={startupFourthStepForm.products_or_services[index].name}, которое вы можете использовать в компоненте <FormField />.

Мне нужно сделать это в useEffect крючке.

Чего мне не хватает?

TL; DR

Ибо нетКомпонент делает то, что мне нужно, но он захватывает только первый индекс массива, startupProductsOrServicesInfo.productsorservices[0].name, и мне нужно, чтобы он был получен динамически.

Answer 1

Фундаментально useEffect перехватчики - это просто способ контроля времени определенного кода. Иначе они совсем не особенные, и поэтому для решения вашей проблемы вам просто нужны обычные старые решения React.

Если вы хотите передать индекс в свой компонент, вы просто делаете это с помощью props:

const YourComponent = props => {

    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // ..
      startupProductsOrServicesInfo.productsorservices[props.index].name,
    // ..
}

А затем передайте индекс в родительском компоненте:

return <YourComponent index={1} />

Если вы хотите, чтобы ваш компонент запоминал индекс, вы должны использовать вместо него состояние:

const YourComponent = () => {
    const [index, setIndex] = useState(0);
    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // ..

          startupProductsOrServicesInfo.productsorservices[index].name,

Если вы хотите, чтобы событие изменило этот индекс, например, если вы хотите, чтобы кнопка в вашем компоненте увеличивала его, вы бы использовали функцию setIndex, возвращаемую useState:

const YourComponent = () => {
    const [index, setIndex] = useState(0);
    // HERE IS WHERE I AM ATTEMPTING TO DO WHAT I NEED
    useEffect(() => {

    // ..

          startupProductsOrServicesInfo.productsorservices[index].name,

    });
    const incrementIndex = () => setIndex(index + 1);
    return <button onClick={incrementIndex}>Click Me!</button>;