从下拉列表中选择一个选项后，数据不会呈现（使用react useState）

Question

我是 MERN 新手，在转向更复杂的问题之前，我试图先让一些简单的东西工作起来。 在下面的代码中，我尝试提供三个 MongoDB 集合的简单选择，获取数据，然后将其呈现在我的页面上。我可以很好地选择一个选项，但数据不会呈现。但是，如果我删除下拉列表的代码并对选项进行硬编码，它就会起作用。状态和 useEffect 是否有一些我不知道的基本方面？我已将代码粘贴在下面：

`从“react”导入 { useEffect, useState }

const 集合 = () => {

const [data, setData] = useState(null)
const [selectedCollection, setSelectedCollection] = useState(null) 
const collectionList = ["participants", "kits", "visits"]

const handleSelectedCollection = async (collection) => {
    setSelectedCollection(collection)
}

useEffect(() => {
    const fetchCollection = async () => {
        const response = await fetch(`/api/xpredict/${selectedCollection}`)
        const json = await response.json()

        if (response.ok) {
            setData(json)
        }
    }
    fetchCollection()
}, [])

return (
    <div className="participants-details">

        <h2>selection</h2>

        { <select onChange={(e) => handleSelectedCollection(e.target.value)}>
            <option value="">Select a collection</option>
            {collectionList.map((collection, index) => (
                <option key={index} value={collection}>{collection}</option>
            ))}
        </select>}
        <div>
            {data && data.map((p) => (
                <p key={p._id}>{p._id}</p>
            ))}
        </div>

    </div>
)

}

导出默认集合`

Answer 1

不会响应选择的选项来获取数据，而是仅在组件安装时获取数据。

更新逻辑以将

selectedCollection

包含为

useEffect

挂钩依赖项，并在适当时有条件地获取数据。

示例：

import { useEffect, useState } from "react";

const collectionList = ["participants", "kits", "visits"];

const Collections = () => {
  const [data, setData] = useState([]);
  const [selectedCollection, setSelectedCollection] = useState(null);
  
  useEffect(() => {
    const fetchCollection = async () => {
      try {
        const response = await fetch(`/api/xpredict/${selectedCollection}`);
        const data = await response.json();
        setData(data);
      } catch(error) {
        // handle/ignore any thrown errors/rejections/etc
      }
    }

    if (selectedCollection) {
      fetchCollection();
    }
  }, [selectedCollection]);

  return (
    <div className="participants-details">
      <h2>selection</h2>

      <select onChange={(e) => setSelectedCollection(e.target.value)}>
        <option value="">Select a collection</option>
        {collectionList.map((collection) => (
          <option key={collection} value={collection}>
            {collection}
          </option>
        ))}
      </select>
      <div>
        {data.map((p) => (
          <p key={p._id}>{p._id}</p>
        ))}
      </div>
    </div>
  );
};

export default Collections;

如果您不需要在其他地方调用

fetchCollection

，这可能有点反模式，直接调用

fetchCollection

来响应 UI 事件会更正确、更简单。

示例：

import { useState } from "react";

const collectionList = ["participants", "kits", "visits"];

const Collections = () => {
  const [data, setData] = useState([]);
  
  const fetchCollection = async (e) => {
    const collection = e.target.value;
    if (!collection) return;

    try {
      const response = await fetch(`/api/xpredict/${collection}`);
      const data = await response.json();
      setData(data);
    } catch(error) {
      // handle/ignore any thrown errors/rejections/etc
    }
  };

  return (
    <div className="participants-details">
      <h2>selection</h2>

      <select onChange={fetchCollection}>
        <option value="">Select a collection</option>
        {collectionList.map((collection) => (
          <option key={collection} value={collection}>
            {collection}
          </option>
        ))}
      </select>
      <div>
        {data.map((p) => (
          <p key={p._id}>{p._id}</p>
        ))}
      </div>
    </div>
  );
};

export default Collections;