Блог

У меня есть приложение react с несколькими вызовами API. У меня есть компонент, а внутри компонента у меня есть класс и функция вне класса. Этот компонент является дочерним и получает некоторые реквизиты от своего родителя. Мой вызов API выполняется во внешней функции, которая называется getSuggestionValue, и для этого вызова API требуется prop (JobID), исходящий из родительского класса. Проблема в том, что у меня ошибка Cannot read property 'projectdata' of undefined

 function getSuggestionValue(suggestion) {

    const job_id = this.props.projectdata.jobId;
    const user_id = suggestion.id;

    API.post('job/assign_user', { job_id, user_id })
        .then(({ data }) => {
            console.log("success!", data)
        })
        .catch((err) => {
            console.log("AXIOS ERROR: ", err);
        })
    return suggestion.label;
}

class ProjectModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            status: null
        };
    }

    render() {

      const autosuggestProps = {
        getSuggestionValue
      };

      return(
        <div>{this.props.projectdata.jobId}
         <Autosuggest
          {...autosuggestProps}
          //other props
         />
        </div>

        //other function calls
      )
    }
}
  

Я знаю, что проблемы здесь

 const job_id = this.props.projectdata.jobId;
  

в функции getSuggestionValue, но понятия не имею, как поместить JobID в вызов API. Как я могу это сделать?

Вы можете обернуть свою функцию:

 const getSuggestionValue = (props) => (suggestion) => {

    const job_id = props.projectdata.jobId;
    const user_id = suggestion.id;
    ...
  

   const autosuggestProps = {
    getSuggestionValue: getSuggestionValue(this.props)
  };
  

Или передайте projectdata как prop во вложенный компонент и включите его в качестве параметра:

 function getSuggestionValue(projectdata, suggestion) {

    const job_id = projectdata.jobId;
    const user_id = suggestion.id;
    ...
  

   const autosuggestProps = {
    getSuggestionValue,
    projectdata: this.props.projectdata
  };
  

Но на этом этапе не имеет большого смысла передавать саму функцию как свойство для начала. Вам следует подумать о том, чтобы просто ссылаться на него статически Autosuggest .

Поскольку ваш this.props не определен, поэтому вы получаете не удается прочитать свойство ‘projectdata’ undefined. Итак, что вы можете сделать, это передать второй параметр функции следующим образом.

Получает значение SUGGESTIONVALUE(предложение, реквизит)

это внутри функции разрешает «это» этой функции.

где бы вы ни вызывали вызов функции getSuggestionValue, как показано ниже:-

Получает значение suggestionvalue(предложение, this.props) { const job_id = props.projectdata.JobID; }

Я полагаю, вы вызываете указанную выше функцию внутри класса.