Javascript 如何保存componentDidmount方法中声明的select选项的值，以便在所有组件中使用

'我正在从源获取API。这是成功的。但是我想在单击时保存所选选项的值，但是每当我单击它时，它就会显示出来，当我移动到另一个部分并移回该部分后，它就会重置自己

我有一个带有步骤的登录表单，步骤像->下一步和上一步按钮，只是保存并导航到下一步，直到最后一次输入，然后提交。我用

componentDidmount

方法获取了一个API。它工作得很好，但每当我点击选择下拉选项并选择一个选项时，它就工作了。如果我进入下一步，其他输入将被保存，但不会被保存

这是我的密码

//my componentDidmount method

constructor(props) {
        super(props);
        this.state = { 
            skills: null
         };
    }

    fetchSkills = () => {
        fetch('https://my_api_link')
        .then(res => res.json())
        .then(skills => {
            this.setState({
                skills: skills.map(s => s.ssp_skill_name)
            })
        });
    };

    componentDidMount() {
        this.fetchSkills();
    }

//我是如何使用它的
技能：
{this.state.skills&&(
{this.state.skills.map（s=>(
选项键={s}>{s}
))}
)}

您可以使用无数个lib中的一个来支持这种情况（、、以及越来越多）。但是，如果您希望在没有新DEP的情况下实施解决方案，您可以利用这一点

const skillsContext = React.createContext()

export default function SkillsContext(props) {
  const [skills, setSkills] = React.useState([])

  React.useEffect(() => {
    fetch('https://my_api_link')
        .then(res => res.json())
        .then(skills => {
            setSkills(skills.map(s => s.ssp_skill_name))
        });
  },[]}

  return <skillsContext.Provider value={skills}>{props.children}</skillsContext.Provider>
}

export default useSkills = React.useContext(skillsContext)

---

如果这是你想要的答案，请接受它。否则我需要补充什么？

const skillsContext = React.createContext()

export default function SkillsContext(props) {
  const [skills, setSkills] = React.useState([])

  React.useEffect(() => {
    fetch('https://my_api_link')
        .then(res => res.json())
        .then(skills => {
            setSkills(skills.map(s => s.ssp_skill_name))
        });
  },[]}

  return <skillsContext.Provider value={skills}>{props.children}</skillsContext.Provider>
}

export default useSkills = React.useContext(skillsContext)

class SomeComponent extends Component {
  static contextType = SkillsContext

  render() {
    this.context
  }
}