Question

我正在构建一个小的itunes应用程序来从Itunes api中获取数据。我试图实现搜索栏以对服务器进行相关提取，但我似乎无法找出从Redux状态传递下来的正确道具。由于它是一个小应用程序，我只使用主App.js和index.js而不是单独的文件夹的动作和减少器。我的主要App.js如下：

 drop index UNIQ_60349993F97DBD80 ON table1

所以我的问题在于我的axios网址。例如，如果我硬编码网址，如

import React, { Component } from 'react';
import './App.css';
import Navbar from './components/Navbar';
import Results from './components/Results';
import ToggleLayout from './components/ToggleLayout';
import AdditionalPages from './components/AdditionalPages';
import axios from 'axios';
import { connect } from 'react-redux';

const PATH_BASE = 'https://itunes.apple.com/search';
const PATH_TERM = 'term=';
const COUNTRY = 'country=es';
const ALBUMS = 'entity=album';
const LIMIT = 'limit=60';  

class App extends Component {
  constructor(props){
    super(props);
    }
  }

  render() {
    return (
       <div>
          <Navbar
            searchTerm={this.props.searchItunes.searchTerm}
            onSearchChange={(e) => this.props.onSearchChange(e.target.value)}
            fetchITunesAlbums={(e) => this.props.fetchITunesAlbums(e)}
          /> 
          { this.props.searchItunes.itunes &&
              <Results itunes={this.props.searchItunes.itunes} grid={this.props.toggle.grid} additionalPages={this.props.toggle.additionalPages} fetchMorePages={this.fetchMorePages}/>
          }

          { this.props.toggle.additionalPages &&
              <AdditionalPages itunes={this.props.searchItunes.itunes} grid={this.props.toggle.grid}/>
          }

          <ToggleLayout
            switchLayout={()=> this.props.switchLayout()}
            grid={this.props.toggle.grid}
          />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    toggle: state.booleanReducer,
    searchItunes: state.searchItunesReducer
  };
};

const mapDispatchToProps = (dispatch) => {
  return {

    switchLayout: () => {
      dispatch({
        type:"GRID"
      });
    },

    fetchMorePages: () => {
      dispatch({
        type:"ADDITIONALPAGES"
      });
    },

    onSearchChange: (term) => {
      dispatch({
        type:"SEARCHTERM",
        payload:term
      });
    },

    fetchITunesAlbums: (e) => {
      e.preventDefault();
        axios.get(`${PATH_BASE}?${PATH_TERM}${searchTerm}&${COUNTRY}&${ALBUMS}&${LIMIT}`)
          .then(response =>{
            dispatch({
              type: 'FETCHITUNESALBUMS',
              payload: response.data
            });
          });
        }
      };
    };

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

我可以从服务器获取结果，但不能在我插入

时获取结果

axios.get(`${PATH_BASE}?${PATH_TERM}&${'someband'}${COUNTRY}&${ALBUMS}&${LIMIT}`)

以下是我的axios.get(`${PATH_BASE}?${PATH_TERM}${searchTerm}&${COUNTRY}&${ALBUMS}&${LIMIT}`)

index.js

非常感谢任何帮助...

Answer 1

我认为你的问题在于搜索词，尝试将值作为参数传递，

     <Navbar
        searchTerm={this.props.searchItunes.searchTerm}
        onSearchChange={(e) => this.props.onSearchChange(e.target.value)}
        fetchITunesAlbums={(e) => this.props.fetchITunesAlbums(e,this.props.searchItunes.searchTerm)}
      />

然后fetchItunes函数为，

fetchITunesAlbums: (e,searchTerm) => {
      e.preventDefault();
        axios.get(`${PATH_BASE}?${PATH_TERM}${searchTerm}&${COUNTRY}&${ALBUMS}&${LIMIT}`)
          .then(response =>{
            dispatch({
              type: 'FETCHITUNESALBUMS',
              payload: response.data
            });
          });
        }
      };
    };

Answer 2

您可以在搜索栏上试试吗

<configuration>
    <property>
    <name>yarn.nodemanager.aux-services</name>
    <value>mapreduce_shuffle</value>
    </property>
    <property>
    <name>yarn.resourcemanager.address</name>
    <value>127.0.0.1:8032</value>
    </property>
    <property>
    <name>yarn.resourcemanager.scheduler.address</name>
    <value>127.0.0.1:8030</value>
    </property>
    <property>
    <name>yarn.resourcemanager.resource-tracker.address</name>
    <value>127.0.0.1:8031</value>
    </property>
</configuration>

并将您的fetchItunesAlbums更新为：

onChange={(e) => props.fetchItunesAlbums(e.target.value)}

而不是在app state redux上保存搜索词。看看它是否有效。

如何使用React / Redux / Axios动态更新搜索词？

2 个答案: