React多下拉筛选逻辑问题：默认全量数据展示及全选项适配

Let's break down and fix your two main problems step by step:

Problem 1: No data showing on initial load #

Looking at your code, the root issue here is how you're accessing the developers data in the render method. Your API returns an array of developer objects (as seen in your console.log), but you're trying to access this.state.developers.features—which doesn't exist (arrays don't have a features property by default). This makes developers undefined, so your component returns null and shows nothing initially.

Problem 2: "All locations" and "All skills" not working as expected #

Your current filter logic tries to match the literal string "All locations" against developer.properties.continent, which will never be true (since continents are values like "North America"). Instead, we need to skip filtering entirely when these "All" options are selected.

Fixed Code Example #

Here's the updated code with both issues resolved:

constructor(props) {
  super(props);
  this.state = {
    developers: [],
    filterCountry: "All locations",
    filterSkills: "All skills"
  };
}

componentDidMount() {
  fetch('API')
    .then(response => response.json()) // Renamed variable for clarity
    .then(developers => {
      this.setState({ developers })
    })
    .catch(err => console.error("Error fetching developers:", err)); // Added error handling
}

filterCountry(e) {
  this.setState({ filterCountry: e.target.value }); // Standard dropdown value access
}

filterSkills(e) {
  this.setState({ filterSkills: e.target.value }); // Same for skills dropdown
}

render() {
  const { developers, filterCountry, filterSkills } = this.state;

  // Show loading state while data loads
  if (developers.length === 0) {
    return <div>Loading developers...</div>;
  }

  // Start with a copy of the full developers array
  let filteredDevelopers = [...developers];

  // Apply location filter ONLY if we're not on "All locations"
  if (filterCountry !== "All locations") {
    filteredDevelopers = filteredDevelopers.filter(developer =>
      developer.properties.continent.includes(filterCountry)
    );
  }

  // Apply skills filter ONLY if we're not on "All skills"
  if (filterSkills !== "All skills") {
    filteredDevelopers = filteredDevelopers.filter(developer =>
      developer.properties.skills.includes(filterSkills)
    );
  }

  // Render your UI with filtered data
  return (
    <div>
      {/* Location Dropdown */}
      <select onChange={(e) => this.filterCountry(e)} value={filterCountry}>
        <option value="All locations">All locations</option>
        <option value="North America">North America</option>
        {/* Add other location options matching your API data */}
      </select>

      {/* Skills Dropdown */}
      <select onChange={(e) => this.filterSkills(e)} value={filterSkills}>
        <option value="All skills">All skills</option>
        <option value="JavaScript">JavaScript</option>
        {/* Add other skill options matching your API data */}
      </select>

      {/* Developer List */}
      <div className="developer-grid">
        {filteredDevelopers.map(dev => (
          <div key={dev.id} className="developer-card">
            <h3>{dev.properties.name}</h3>
            <p>Continent: {dev.properties.continent}</p>
            <p>Skills: {dev.properties.skills || "No skills listed"}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Key Changes Explained #

1. Fixed initial data access: Removed the incorrect .features call and directly use this.state.developers since that's the array returned by your API.
2. Added loading state: Shows a friendly message while data is being fetched instead of returning null.
3. Conditional filtering: Only applies location/skill filters when the selected option isn't "All"—this ensures all developers are shown by default.
4. Standardized dropdown handling: Updated filter methods to use e.target.value, which is the standard way to get a dropdown's selected value.
5. Error handling: Added a .catch() to log API errors, making debugging easier if fetch fails.
6. Empty skills fallback: Added a check for empty skills values (like in your data example) to avoid showing blank text.

内容的提问来源于stack exchange，提问作者tallgirltaadaa