使用反应挂钩表单提交后显示输入

Question

我在 AddAlbum 组件中有一个反应挂钩表单。提交输入后，我可以在控制台中看到该对象，但我不知道如何提取此信息以将其显示在 AlbumList 组件中。我有 initialState 显示所有内容（图像、名称、艺术家、年份），但是当我尝试显示我的输入时，我看到的只是一张空卡片，上面有我图像中的 alt 文本。

import React, { useState, useContext } from 'react';
import { useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';
import { Link, useHistory } from 'react-router-dom';

import { GlobalContext } from '../context/GlobalState';

export const AddAlbum = () => {
  let history = useHistory();

  const { addAlbum, albums } = useContext(GlobalContext);

  const [cover] = useState();
  const [name] = useState('');
  const [artist] = useState('');
  const [year] = useState('');

  const onSubmit = (data, e) => {
    console.log(data, e);
    const newAlbum = {
      id: albums.length + 1,
      cover,
      name,
      artist,
      year,
    };
    addAlbum(newAlbum);
    history.push('/');
  };

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <React.Fragment>
      <div className="w-full max-w-sm container mt-20 mx-auto">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="w-full mb-5">
            <label
              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
              htmlFor="cover"
            >
              COVER
            </label>
            <input
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:text-gray-600"
              type="file"
              {...register('cover', { required: true })}
            />
          </div> 

...

          <div className="flex items-center justify-between">
            <button
              className="mt-5 bg-green-400 w-full hover:bg-green-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
              type="submit"
            >
              Add Album
            </button>
          </div>
         </div>
        </form>
      </div>
    </React.Fragment>
  );
};

这是 AlbumList 组件...

import React, { useContext } from 'react';
import { Link } from 'react-router-dom';

import { GlobalContext } from '../context/GlobalState';

export const AlbumList = () => {
  const { albums, removeAlbum } = useContext(GlobalContext);
  return (
    <React.Fragment>
      {albums.length > 0 ? (
        <React.Fragment>
          {albums.map((album) => (
            <div class="bg-white shadow p-3 m-3 rounded lg:w-64">
              <div>
                <img src={album.cover} alt="album cover"></img>
              </div>

...

</React.Fragment>
      ) : (
        <p className="text-center bg-gray-100 text-gray-500 py-5">
          Add an album!
        </p>
      )}
    </React.Fragment>
  );
};

Answer 1

你必须像这样设置对象...

const onSubmit = (data, e) => {
    const newAlbum = {
      id: albums.length + 1,
      cover: data.cover,
      name: data.name,
      artist: data.artist,
      year: data.year,
    };
    addAlbum(newAlbum);
    history.push('/');
  };

或者你可以这样做

const onSubmit = (data, e) => {
        const newAlbum = {
          id: albums.length + 1,
          ...data,
        };
        addAlbum(newAlbum);
        history.push('/');
      };

使用反应挂钩表单提交后显示输入

Display input after submit using react hook form

reactjs

react-context

react-hooks