reactjs - React Graphql，从逗号分隔的字符串创建选择菜单

Question

我正在使用 graphql 创建一个简单的 React 应用程序，我使用 Strapi 作为服务器。

在 Strapi 中，我有一个带有 name 字段和 make 字段的 Vechicle 集合类型。

在我拥有的名称字段中car，在我拥有的名称字段中volvo, saab, audi, ford

我很想car在选择菜单中显示和制作。

获取数据的查询

import gql from 'graphql-tag';

export const GET_ALL_CARS = gql `
    query Cars{
        cars{
            _id
            name
            makes
        }
    }
`

反应页面

import React from 'react';
import { GET_ALL_CARS } from './queries';
import {Vechicles} from './generated/Vechicles'
import { useQuery } from "@apollo/react-hooks";

const App:React.FC = () => {

  const {data, loading} = useQuery<Vechicles>(GET_ALL_CARS, {})

  if(loading) return <div>Loading</div>

  if(!data) return <div>No Data</div>

  return (
    <div className="App"> 
      <h1>Vehicles</h1>
      {
        data && data.vechicles && data.vechicles.map(vechicle => (
          <div>
            //car displays ok
            {vechicle?.name}
            //trying to create an array here from the string of makes
            const makes_arr = {car?.makes ?? ''}.split(',')
            <select>
              {
                makes_arr.map(make = > {
                    return(
                        <option>{make}</option>
                    )
                })
              }
            </select>
          </div>
        ))
      }
    </div>
  );
}

export default App;

如何在选择菜单中简单地显示逗号分隔列表。

标签： reactjsgraphql

Answer 1

你不能在这个地方创建一个数组，因为它是 JSX 的一部分。尝试在您的select.

我删除了可选链接，因为编辑器不支持它。

function App() {
  const data = {
    vehicles: [
      {
        name: "car",
        makes: "volvo, saab, audi, ford"
      },
      {
        name: "car2",
        makes: "volvo, saab, audi, ford"
      }
    ]
  };

  return (
    <div className="App">
      <h1>Vehicles</h1>
      {data &&
        data.vehicles &&
        data.vehicles.map(vehicle => (
          <div>
            {vehicle.name}
            <select>
              {vehicle.makes
                .split(",")
                .map(make => <option>{make.trim()}</option>)}
            </select>
          </div>
        ))}
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root" />