Question

我有一个带有几个API调用的react应用。我有一个组件，在组件内部，我有一个类，而在类外有一个函数。这个组件是一个孩子，并从其父母那里收到一些道具。我的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调用中。我该怎么办？

Answer 1

您可以包装函数：

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静态引用它。

Answer 2

由于您的this.props是未定义的，因此这就是您无法读取未定义的属性“ projectdata”的原因。因此，您可以做的就是将第二个参数传递给这样的函数。

getSuggestionValue（建议，道具）

函数内的

this 解析该函数的“ this”。

无论您在何处调用getSuggestionValue函数，如下所示：-

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

我想您正在类中调用上述函数。

如何在React中将Class属性的prop值转换为函数？

2 个答案: