重构我的应用程序后续步骤？

Question

我使用React和Redux以及NASA Mars漫游器API制作了一个示例项目，该API基本上是一个输入字段，您将日期设置为YYYY-MM-DD格式并按Enter键，它将返回显示您输入日期的一行数据，火星车的名字，以及那天火星车拍的照片。现在我已经将我的React应用程序编码到它所获得的流动站的位置，这就是名为“机会”的流动站。

我希望这个应用程序能够选择下拉菜单，选择“机会”，“好奇心”或“精神”，但我不确定如何做到这一点。

我不知道该怎么办。我曾尝试为名为rover_select的下拉菜单创建一个新的基于类的组件，并且在那里拥有它自己的状态，但是从来没有能够使其工作，并且我不确定我的方法是否正确。

我有一个名为query_bar的搜索栏组件，其中包含rover_select的子组件，该组件是下拉菜单的代码所在。

这是query_bar.js

class QueryBar extends Component {
    constructor(props) {
        super(props);

        this.state = { searchdate: '' };

        this.onInputChange = this.onInputChange.bind(this);
        this.onFormSubmit = this.onFormSubmit.bind(this);
    }

    onInputChange(event) {

        this.setState({ searchdate: event.target.value });
    }

    onFormSubmit(event){
        event.preventDefault();

        //we need to fetch rover data

        console.log("my test",this.state.searchdate)


        this.props.fetchRoverData(this.state.searchdate);
        this.setState({ searchdate: '' });
    }


    render() {
        return (
            <form onSubmit={this.onFormSubmit} className="input-group">

                    <input placeholder="YYYY-MM-DD" className="form-control" value={this.state.searchdate}  onChange={this.onInputChange} />

                    <span className="input-group-btn">
                        <button type="submit" className="btn btn-secondary">Submit</button>
                    </span>
                    <SelectRover />

            </form>
        );
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ fetchRoverData }, dispatch);
}

export default connect(null, mapDispatchToProps)(QueryBar);

然后是rover_select.js

class SelectRover extends Component {
    constructor(props) {
        super(props);

        this.state = { rovervalue: 'opportunity' };

        this.onInputChange = this.onInputChange.bind(this);
    }

    onInputChange(event) {

        this.setState({ rovervalue: event.target.value });

        this.props.fetchRoverName(this.state.rovervalue);

        console.log('rover selected',this.state.rovervalue);
    }

    render() {
        return (

                <label>
                    Select A Rover:                 
                        <select value={this.state.rovervalue} onChange={this.onInputChange} className="form-control" name="Rovers">
                            <option value="curiosity">Curiosity</option>
                            <option value="opportunity">Opportunity</option>
                            <option value="spirit">Spirit</option>
                        </select>
                </label>
        );
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ fetchRoverName }, dispatch);
}

export default connect(null, mapDispatchToProps)(SelectRover);

基本上我大量修改了来自Stephen Grider的React课程的代码，该代码的一部分也是一个名为index.js的动作创建者js文件，它使用axios和promises，在该组件中有一个名为fetchRoverData（date）的函数，它获取日期从搜索栏输入并输入用户输入的日期并将其添加到网址中，我基本上尝试做同样的事情，但是用户选择的下拉菜单的值并将该值添加到获取的网址中这里是我的actions文件夹里面的index.js。

index.js（在我的actions文件夹中）

const API_KEY= 'D5XmTzyRFPHDzKv3yBRMWwwtfYd7Ui986j8vC2KM';

const ROVER_NAME='opportunity';

const FIRST_PART_ROOT_URL = `https://api.nasa.gov/mars-photos/api/v1/rovers/${ROVER_NAME}/photos?earth_date=`;

const SECOND_PART_ROOT_URL = `&api_key=${API_KEY}`;

export const FETCH_ROVER_DATA = 'FETCH_ROVER_DATA';

export function fetchRoverName(name) {
        return {
        type: ROVER_NAME,
    };

}

export function fetchRoverData(date) {

    const url = `${FIRST_PART_ROOT_URL}${date}${SECOND_PART_ROOT_URL}`;

    const request = axios.get(url);

    console.log('Request:', request);

    return {
        type: FETCH_ROVER_DATA,
        payload: request
    };
}

这个项目的所有源代码都是here（这是没有下拉列表的1.0版本，它只使用一个硬编码的漫游器名称）。有人能指出我应该如何进行的正确方向吗？选择下拉是否应该是一个单独的组件？

Answer 1

您可以将它保留为一个组件，并将您所指的<select>标记放在query_bar组件中。

然后允许用户输入日期并选择流动站名称，更新组件状态变量中的新值，即使用this.setState({ nameOfStateVariable: newValue});

然后在用户提交调用操作中的一个函数（fetchRoverData()）。当你调用函数，即fetchRoverData(date, rover_name)时，发送日期和rover_name，并将它们全部替换为你在index.js中的正确位置的url（在actions文件夹中）

希望这可以帮助