問題

私は反応するのが初めてで、私が間違いを犯すのを見るベストプラクティスについて質問があります。 APIを呼び出して情報を取得し、APIによって応答が返されたら状態の配列を変更します。 「レンダリング」では、この配列から情報を取得する必要があります(完了したら)。または、レンダリングが初期化されたときに配列が空であるため、エラーが返されます。

 class MyClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeIndex: 0,
      items: []
    }
  }

  componentDidMount() {
    axios
      .get(`API_ADDRESS`, {
        headers: {
          Authorization: `Token XXX`,
        },
      })
      .then(function(response) {
        this.setState({
          items: response.results,
        })
      })
      .catch(error => {
        notification.warning({
          message: error.code,
          description: error.message,
        })
      })
  }

  changeDialog = (e, index) => {
    e.preventDefault()
    this.setState({
      activeIndex: index,
    })
  }

  render() {
    const { activeIndex, items } = this.state
    const {
      first_name: firstName,
      last_name: lastName,
      phone,
      email,
      address,
    } = items[activeIndex]
 

エラーは次のことを示します。

TypeError:_items $ activeIndeは未定義です

データの読み込みに関連するこのエラーを解決するにはどうすればよいですか? (destrying要素メソッドを保持しようとしています)

どうもありがとう オット

  ベストアンサー

サーバーからフェッチするAPIは非同期なので。コンポーネントの初めてレンダリング、axiosでsetStateを設定したデータはまだ更新されていません。コンポーネントが2回目にレンダリングされたときに更新されます。

したがって、activeIndex is definedの場合、items[activeIndex]で変数を宣言するように、このようにレンダリングコンポーネントの状態を確認する必要があります。

 activeIndex && const {
      first_name: firstName,
      last_name: lastName,
      phone,
      email,
      address,
} = items[activeIndex]

 

  同じタグがついた質問を見る

javascriptreactjsreduxreact-redux