Блог

я извлекаю API из источника. И это было успешно. Но я хочу, чтобы значение выбранного параметра сохранялось при нажатии, но всякий раз, когда я нажимаю на него, он отображается, и после того, как я перейду в другой раздел и вернусь к нему, он сбросится.

У меня есть форма входа в систему с шагами, шаги похожи на кнопки -> Next и previous, просто для сохранения и перехода к следующему от до последнего ввода, затем отправки. И я извлек API с componentDidmount помощью метода. Это работало так хорошо, но всякий раз, когда я нажимал на выпадающие меню выбора и выбирал нужный вариант, это срабатывало, и если я перейду к следующему шагу, другие входные данные будут сохранены, но он не будет сохранен.

Вот мой код.

 //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();
    }
 

 //how I used it

<div className="form-group mb-4" style={{maxWidth: "25rem"}}>
      <label htmlFor="skills">Skills:</label>
        {this.state.skills amp;amp; (
           <select className="form-control email_input">
            {this.state.skills.map(s => (
               option key={s}>{s}</option>
             ))}
         </select>
       )}
   </div>
 

вы можете использовать одну из множества библиотек для поддержки этого случая (useSWR, react-query, redux-toolkit, easy-peasy и многое другое). Но если вы хотите реализовать решение без новых 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)
 

поместите <SkillContext> в корневой каталог вашего приложения, а затем получите доступ к значению из useSkills любого места вашего приложения.

если вы используете синтаксис компонента, вы можете получить к нему доступ через статический contextType , например, так:

 class SomeComponent extends Component {
  static contextType = SkillsContext

  render() {
    this.context
  }
}