反応でredux状態からデータをプルするにはどうすればよいですか？

debugcn 投稿 Dev

アーメド・アリ

reduxからAPIリクエストを作成しようとしていますが、そのデータを取得して、反応状態（arrdata）にします。api呼び出しは機能しますが、reduxapi呼び出しに基づいてapp.jsの状態を更新することができないようです。私は何かが足りませんか？

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      arrdata: []
    };
  }
  componentDidMount() {
    this.props.loadData();
    console.log(this.props.data);
  }
  render() {
     const {arrdata} = this.state
    return ( ......)}}


const mapStateToProps = state => {
  return {
    data: state.data
  };
};

export default connect(mapStateToProps, dataAction)(App);

アクション

export function loadData() {
  return dispatch => {
    return axios.get("https://api.coincap.io/v2/assets").then(response => {
      dispatch(getData(response.data.data.slice(0, 10)));
    });
  };
}

export function getData(data) {
  return {
    type: "GET_DATA",
    data: data
  };
}

レデューサー

let initialState = {
  data: []
};

const mainReducer = (state = initialState, action) => {
  if (action.type === "GET_DATA") {
    return {
      ...state,
      data: action.data
    };
  } else {
    return {
      ...state
    };
  }
};

export default mainReducer;

親切なユーザー

私はあなたが状態で誤解を招く店だと思います。あなたはarrdataそれが国家の内部で保存されているので、空ですが、あなたのデータは、小道具から来ています。

とにかく、arrdataどこにも状態を設定していないので、状態は空のままです。そのためには、getDerivedStateFromPropsライフサイクルフックなどを使用する必要がありますが、お勧めしません。

render() {
   const { data } = this.props;
   console.log(this.props.data);

   return (
     // do something with your data
   );
}

データを適切に記録する必要があります。

注：実際には、状態は必要ありません。小道具から状態にデータを保存するよりも、小道具を操作する方が良いアプローチです（ほとんどの場合）。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-12

コメントを追加

サインイン

分類Dev

Related 関連記事

記事