reactjs - 使用键值对填充反应组件中的选项

Question

我正在尝试通过提供键值对来动态填充作者姓名的选项，并希望得到如图所示的结果，但结果并不像，而是为每个作者显示四种不同的形式。请参阅图片以清楚地了解我的问题。

这就是我得到的：

import { gql ,useQuery} from '@apollo/client';



const getAuthorsQuery = gql`
    {
        authors{
            name
            id
        }
    }
`;
function AddBook() {
    const { loading, error, data } = useQuery(getAuthorsQuery);
  
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;
  
        console.log(data)
    
        return   data.authors.map(author => {
            
          return (
            <form id="add-book">
            <div className="field">
                <label>Book name:</label>
                <input type="text" />
            </div>
            <div className="field">
                <label>Genre:</label>
                <input type="text" />
            </div>
            <div className="field">
                <label >Author:</label>
                <select  >
                    
                    <option key={author.id} value ={author.id}>Select Authors</option>
                    {author.name}
                </select>
            </div>
            <button>+</button>

        </form>
             
          )
        })

标签： reactjsgraphql

Answer 1

而不是仅在选项中使用整个表单的地图。

{data.authors.map(author => <option key={author.id} value ={author.id}>Select Authors</option>)}