如何将一个prop值从一个Class中的函数中获取？

Posted 2021-04-04

我有一个带有几个API调用的反应应用程序。我有一个组件，在组件内部，我有一个Class和类外的函数。该组件是子组件，并从其父组件接收一些道具。我的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作为支柱传递到嵌套组件中，并将其作为参数包含在内：

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'。所以你能做的就是将第二个参数传递给这样的函数。

getSuggestionValue（建议，道具）

这个函数内部解析了该函数的“this”。

无论你在哪里调用getSuggestionValue函数调用如下： -

getSuggestionValue（suggestion，this.props）{const job_id = props.projectdata.jobId; }

我想你在类中调用了上面的函数。