AntDesign 和 React 问题

Question

How do I obtain a value from one component to another using AntDesign?

I have component call CreateProduct which imports another AntDesign component call AddImage

AddImage uploads a picture to Cloudinary and obtains the url of the pic uploaded, this works fine but the CreateProduct don't update the value

I have the hypothesis that using useEffect should solve the problem but not sure how to implement

This is the CreateProduct component

import React, { useState, useEffect } from 'react';
import {
  Form,
  Button,
  Input,
  Select,
  message,
  Alert,
  notification,
} from 'antd';
import { AddImage } from './AddImage.js';
import { createProduct } from '../../services/Products';

function CreateProductForm({ history }) {
  const [img, setImg] = useState(null);
  const [error, setError] = useState(null);

  const openNotification = (placement, coincidencias) => {
    notification.info({
      message: `Coincidences found ${coincidencias}`,
      description: `We have found ${coincidencias} wishes that may be coincidences of your product`,
      placement,
    });
  };
  async function handleFormSubmit(values) {
    let send = true;

    console.log(img);
    // HERE I need to update img to ut in the values and send it to the Db
    // values.image = img; /

    //mensajes de campos vacios en form
    Object.entries(values).map((val) => {
      if (val[1] === undefined) {
        message.error(`Add ${val[0].toUpperCase()} field is empty`);
        send = false;
      }
      if (val[0] === 'price') {
        setError(
          'All the fields must be filled and the price must have numbers,not letters!'
        );
        let valor = Number(val[1]);
        if (typeof valor !== 'number') {
          send = false;
        }
      }
    });
    if (send) {
      let { data } = await createProduct(values);
      if (data.wishCoincidences.length > 0) {
        openNotification('bottomRight', data.wishCoincidences.length);
      } //mensajes de coincidencias
      history.push('/MyProducts');
      message.success(`${data.name} created`);
    }
  }

  return (
    <>
      <Form layout="vertical" onFinish={handleFormSubmit}>
        <h1>Create your product!</h1>
        {error && <Alert message={error} type="error" />}
            <Form.Item name="name" label="Title:">
              <Input />
            </Form.Item>
    
            <Form.Item name="description" label="Description:">
              <Input />
            </Form.Item>
    
            <Form.Item name="price" label="Price:">
              <Input />
            </Form.Item>
    
            <Form.Item name="image" label="Image:">
              {/* This returns img, which is an url, how do I get it?*/}
              <AddImage />
              {img & img ? img : 'not reading img'}
            </Form.Item>
    
            <Form.Item name="category" label="category:">
              <Select initialvalue="" style={{ width: '20%' }}>
                <Select.Option value="books">Books</Select.Option>
                <Select.Option value="electronics">Electronics</Select.Option>
                <Select.Option value="clothes">Clothes</Select.Option>
                <Select.Option value="other">Other</Select.Option>
              </Select>
            </Form.Item>
    
            <Button type="primary" block size="middle" htmlType="submit">
              Create
            </Button>
          </Form>
        </>
      );
    }
    
    export default CreateProductForm;

This is the AddImage component

import { Upload } from 'antd';
import React, { useState } from 'react';
import axios from 'axios';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';

const cloudinaryAPI =
  'https://api.cloudinary.com/**********************/upload';

export const AddImage = () => {
  const [img, setImg] = useState(null);
  const [loading, setLoading] = useState(null);
  const [error, setError] = useState(null);
  async function handleUploadFile(file) {
    try {
      setLoading(true);
      const data = new FormData();
      //esto sube a el archivo a cloudinary
      data.append('file', file);
      data.append('upload_preset', 'uploadfilestiendaDeGarage');
      //esto manda al backend? me manda CORS
      const {
        data: { secure_url },
      } = await axios.post(cloudinaryAPI, data);

      setImg(secure_url);
      setLoading(false);
    } catch (e) {
      console.dir(e.response.data.message);
      setError(e.response.data.message);
    }
  }

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );

  return (
    <>
      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        beforeUpload={handleUploadFile}
        // action={() => alert(img)}
      >
        {img ? (
          <img src={img} alt="pic" style={{ width: '50%' }} />
        ) : (
          uploadButton
        )}
      </Upload>
    </>
  );
};

You can se a live version of the app where I want to implement this here

Answer 1

For image state you have same name in CreateProduct and AddImage component so try to change state name in CreateProduct like below:-

const [imgUrl, setImgUrl] = useState(null);

Pass setImgUrl as prop in AddImage component

<AddImage setImgUrl={(url) => setImgUrl(url)}/>

Extract setImgUrl in AddImage and use in handleUploadFile like below:-

export const AddImage = ({setImgUrl}) => {
  const [img, setImg] = useState(null);
  const [loading, setLoading] = useState(null);
  const [error, setError] = useState(null);
  async function handleUploadFile(file) {
    try {
      setLoading(true);
      const data = new FormData();
      //esto sube a el archivo a cloudinary
      data.append('file', file);
      data.append('upload_preset', 'uploadfilestiendaDeGarage');
      //esto manda al backend? me manda CORS
      const {
        data: { secure_url },
      } = await axios.post(cloudinaryAPI, data);

      setImg(secure_url);
      setImgUrl(secure_url);   // use function here to set image url
      setLoading(false);
    } catch (e) {
      console.dir(e.response.data.message);
      setError(e.response.data.message);
    }
  }

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );

  return (
    <>
      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        beforeUpload={handleUploadFile}
        // action={() => alert(img)}
      >
        {img ? (
          <img src={img} alt="pic" style={{ width: '50%' }} />
        ) : (
          uploadButton
        )}
      </Upload>
    </>
  );
};

So now imgUrl will have image url and you can use it in CreateProduct component.