在React

Question

我正在使用React组件，需要在onClick内部使用一个条件，在map（）方法内部使用该条件，以便当用户选择所选选项时，该选项在用户可以浏览的技能列表中不再可用并且一旦用户取消选择此选项，它就会回到可用选项列表中。

我开始编程，我不知道该怎么写。有人可以帮我解释一下语法吗？非常感谢<3

import React, { useEffect, useState } from "react";
import axios from "./axios";

export default function FindCollaborator(props) {

    const [selectedSkills, useSellectedSkills] = useState([]);
    const [userSearch, setUserSearch] = useState("");

    let skills = [
        "plumbing",
        "python",
        "javascript",
        "ruby on rails",
        "first aid",
        "cooking",
        "home repairs",
        "writing",
        "public speaking",
        "basic computer skills",
        "writing resume",
        "writing cover letter",
        "basic math",
        "basic etiquette",
        "basic civis",
        "coaching",
        "german",
        "english",
        "spanish",
        "italian",
        "chinese",
        "french",
        "japonese"
        ];


    skills = skills.filter(skill => skill.startsWith(userSearch));
    console.log(skills);


    const handleSubmit = e => {
        e.preventDefault();
    };

    const submitButton = e => {
        e.preventDefault();
        axios
            .post("/findcollaborator", props)
            .then(res => {
                console.log("res.data /findcollaborator:", res.data);
                setUserSearch(res.data);
            })
            .catch(error => {
                console.log("Error on POST /findcollaborator:", error);
            });
    };

    useEffect(() => {
        console.log("useEffect on FindCollaborator running");
        axios
            .get("/findcollaborator")
            .then(res => {
                console.log("res.data on get /findcollaborator:", res.data);
                useSellectedSkills(res.data);
            })
            .catch(error => {
                console.log("Error on get /findcollaborator:", error);
            });
    }, []);

    useEffect(() => {
        console.log("useEffect2 on FindCollaborator running:");
        axios
            .get("/findcollaborator" + userSearch)
            .then(res => {
                console.log("re.data on get /findcollaborator 2:", res.data);
                useSellectedSkills(res.data);
            })
            .catch(error => {
                console.log("Error on get /findcollaborator 2:", error);
            });
    }, [userSearch]);
    console.log(userSearch);

    return (
        <div className="find-collaborator-container">
            <div className="collaborator-profile">

                <form onSubmit={handleSubmit} className="questions-form">
                    <div className="skill-one-container">

                        <h3>Skill One</h3>
                        <input
                            onChange={e => setUserSearch(e.target.value)}
                            placeholder="insert skill one"
                        />

                        <h3>
                            From 0 to 5, how would you rate your &quot;skill
                            name&quot; skills?
                        </h3>

                        <select name="rating">
                            <option value="selected disabled hidden">
                                Rate your skills
                            </option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>

                        <h3>
                            Would you like to teach or learn &quot;skill
                            name&quot;?
                        </h3>
                        <select name="status">
                            <option value="selected disabled hidden">
                                Choose an option
                            </option>
                            <option value="learn">Learn</option>
                            <option value="teach">Teach</option>
                        </select>
                    </div>

                    <button
                        className="find-collaborator-button"
                        onClick={submitButton}
                    >
                        Submit
                    </button>
                </form>
            </div>

//this is the section where I need to map

            **{skills.map(skill => (
                <div onClick={e => skills}>
                    {skill}
                </div>
        ))}**

        </div>
    );
}

Answer 1

我不确定您为什么要使用硬编码阵列，然后需要更改所选技能的网络请求

您的代码将硬编码和客户端操作与似乎在做相同事情的网络请求混合在一起

您可能需要先获取技能列表，然后在客户端对其进行过滤以进行用户搜索。

您可以在此之前对其进行过滤，以删除已经选择的技能

我认为您应该拥有这样的东西：

const [allSkills, setAllSkills] = useState([])
const [selectedSkills, setSelectedSkills] = useState([])
const [userSearch, setUserSearch] = useState("")

// request to API for list of all skills
useEffect(() => {
  axios.get(/**...**/).then(res => setAllSkills(res.data))
}, [])

// then remove already selected skills
const unselectedSkills = allSkills.filter(s => !selectedSkills.includes(s))

// then filter with user search
const filteredSkills = unselectedSkills.filter(s => s.startsWith(userSearch))

// here calling the function with the skill with return a function that takes an event, this is so you can use it directly in onClick prop like this : addSkill(skill)
const addSkill = skill => e => {
    const newSelectedSkills = [...selectedSkills, skill]
    setSelectedSkills(newSelectedSkills)
}

return (
    <div class="available-skills">
        {filteredSkills.map(s => <div onClick={addSkill(s)}>{s}</div>)}
    </div>
)