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

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>
             
          )
        })

Answer 1

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

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

Answer 2

您的操作顺序错误。您在代码流中太早放置了循环，因此要为每个选项的整个表单创建所有 JSX。

您可以在方法的前面将 JSX 声明为变量，然后通过将其包装在 {}

中来在最终返回的 JSX 中使用它

另外，您希望将 author.name 放在选项中，并且您的 Select Author 选项应该有一个空值；像这样：

let options = [];
for (let author in authors) {
    options.push(<option key={author.id} value={author.id}>author.name</option>);
}

...

<select>
    <option value="">Select Authors</option>
    {options}
</select>