小编Ama*_*man的帖子

我有一个由数组形式的数据组成的位置数组：

const locations = ['Mumbai', 'tuljapur', 'Bhagalpur', 'North East', 'Bongaigaon', 'South District', 'Pune', 'Cuttack', 'amritsar', 'East Godavari', 'Chandigarh']

当我将此数组作为选项属性传递给react-select时。它给出以下错误：

ScrollManager.tsx:48 Uncaught TypeError: Cannot use 'in' operator to search for 'options' in Mumbai
    at ScrollManager.tsx:48:1
    at Array.map (<anonymous>)
    at buildCategorizedOptions (ScrollManager.tsx:48:1)
    at Select._this.buildCategorizedOptions (ScrollManager.tsx:48:1)
    at Select._this.buildFocusableOptions (ScrollManager.tsx:48:1)
    at Select.openMenu (ScrollManager.tsx:48:1)
    at Select._this.onInputFocus (ScrollManager.tsx:48:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)

这是 React 选择组件：

 <Select
                className="ml-4 mb-4 w-[180px]"
                placeholder="School Name"
                // isClearable={true}
                options={locations}
                name={"class"}
                // value={selectedFilters.status}
              />

如何将我的数组作为反应选择中的选项发送

我已使用 useEffect 获取数据，并在控制台上获取数据。我已调用 setState 方法来更新状态，但 .map 函数不起作用。即使在控制台上也没有发生任何事情。

 import React, { useState, useEffect } from "react";


function HomePage() {
  const [isFlipped, setIsFlipped] = useState(false);

  const [cardData, setCardData] = useState([]);

  // useEffect function
  useEffect(async () => {
    const url = "https://rickandmortyapi.com/api/character";

    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        const jsonData = json.results;
        setCardData(jsonData);
        console.log(jsonData);
      } catch (error) {
        console.log("error", error);
      }
    };
    fetchData();
  }, []);

  const handleClick = () => …

我已经尝试了很多，来应用媒体查询，但是无论我在做什么，都没有响应，即使在 chrome 上检查它，我也看不到那里应用的任何媒体查询...

有人可以解释一下原因是什么吗。我还尝试添加一个单独的 css 文件，然后应用媒体查询，但这也不起作用。

我基本上需要隐藏移动视图中的navLink

import React from "react";
import Logo from "../../assets/Logo/LogoWhite.svg";

function Header() {
  return (
    <div style={styles.container}>
      <div class="logo" style={styles.logo}>
        <img src={Logo} style={styles.logoImage} alt="LogoImage" />
        <h1 style={styles.logoHeader}>OKidzLabs</h1>
      </div>
      <div class="navContent" style={styles.navContent}>
        <ul style={styles.navList}>
          <li>
            <a style={styles.navLinks} href="#">
              Home
            </a>
          </li>
          <li>
            <a style={styles.navLinks} href="#">
              Gallery
            </a>
          </li>
          <li>
            <a style={styles.navLinks} href="#">
              Meet the Creators
            </a>
          </li>
          <li>
            <a style={styles.navLinks} href="#">
              Activities for Kids
            </a>
          </li>
        </ul>
      </div>
      <div class="social" style={styles.social}></div>
    </div>
  );
}

const …