Question

我对此代码有疑问：

const ListItem = ({data: {loading, error, items}}) => {
  if (loading) {
    return <p>Loading ...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }

  console.log(items)

  return (
    <select>
      <option key='0' value='0' disabled defaultValue>Seleccione un Item</option>
      {items.map(item => <option key={item.id} value={item.id}>{item.item}</option>)}
    </select>
  );
}

const QUERY_ITEMS = gql`
  query{
    items{
      id
      item
    }
  }
`
const ItemsListWithData = graphql(QUERY_ITEMS)(ListItem);

是一个简单的Select组件，按查询填充，但不出现在索引上。如果我把ul选上就可以了，但是选择是问题所在，我不知道发生了什么，我要在代码中加上结果。非常感谢，对不起我的英语！

enter image description here

Answer 1

您的问题是，<div>包装的<select>具有错误的类。

从

更改

<div class="input-field col s12"> /* ...  */ </div>

收件人

<div class="select-field col s12"> /* ...  */ </div>

一切都会按预期进行！

选择On React with component

1 个答案: