如何在React中將Class屬性的prop值轉換為函數？

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（suggestion，this.props）{const job_id = props.projectdata.jobId; }

我想您正在類中調用上述函數。