Как передать данные из компонента-потомка в компонент-родителя с использованием атрибута action в Server Actions в Next.js 14?

Как можно извлечь текст ошибки из блока catch(error) и id из функции CreateTitle для передачи их в родительскую функцию FormErrorAction?
  • 10 июня 2024 г. 14:51
Ответы на вопрос 1
Для передачи данных из компонента-потомка в компонент-родителя с использованием атрибута action в Server Actions в Next.js 14, вы можете использовать следующий подход:

1. В компоненте-потомке создайте Server Action с нужной логикой и данными, которые вы хотите передать родительскому компоненту. Например:

```js
export async function fetchData() {
  const data = await fetch('https://api.example.com/data');
  return data.json();
}
```

2. В компоненте-родителе определите атрибут action, который будет вызывать Server Action из дочернего компонента и передавать полученные данные в родительский компонент. Например:

```jsx
<MyChildComponent action={fetchData} />
```

3. В компоненте-потомке вызовите action в нужном месте (например, в обработчике события) и передайте данные в родительский компонент. Например:

```jsx
function MyChildComponent({ action }) {
  async function fetchDataAndPassToParent() {
    const data = await action();
    // Передача данных в родительский компонент
    return data;
  }

  return (
    <button onClick={fetchDataAndPassToParent}>Загрузить данные</button>
  );
}
```

Чтобы извлечь текст ошибки из блока catch(error) и id из функции CreateTitle для передачи их в родительскую функцию FormErrorAction, вам нужно сохранить ошибку и id в локальном состоянии компонента-потомка, а затем передать их в родительский компонент через callback функцию.

Пример:

```jsx
function MyChildComponent({ formErrorAction }) {
  const [error, setError] = useState(null);
  const [id, setId] = useState(null);

  async function fetchData() {
    try {
      // Логика получения данных
    } catch(error) {
      setError(error);
      setId('some-id');
    }
  }

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    if(error && id) {
      formErrorAction({ error, id });
    }
  }, [error, id]);

  return (
    // Ваш код компонента
  );
}
```

Вызов MyChildComponent с передачей функции formErrorAction в родительский компонент:

```jsx
<MyChildComponent formErrorAction={handleFormErrorAction} />
```

В родительском компоненте реализуйте функцию handleFormErrorAction, которая будет принимать ошибку и id:

```jsx
function handleFormErrorAction({ error, id }) {
  console.log('Error:', error);
  console.log('ID:', id);
  // Дальнейшие действия
}
``` 

Таким образом, вы сможете передавать текст ошибки и id из компонента-потомка в компонент-родитель с использованием callback функции.
Похожие вопросы