Question

我正在构建一个应用程序，该应用程序从后端获取一份职位描述列表，并接受用户输入以选择其中之一以及几个参数以发出第二个后端请求。由于将涉及更多组件，因此我决定使用Redux来管理全局状态，这似乎在我的代码中造成了麻烦。

我的DropdownButton组件使用handleJobSelect来修改本地状态，从而将当前selectedJobValue显示为FormControl组件的值，如果直接渲染我的项目（例如，下面的代码中的“好项目”），一切似乎都很好。但是，如果我使用获取的列表来映射我的项目，则选择其中一个项目将以某种方式导致整个网站重新加载，丢失所有状态更改并重置selectedJobValue和FormControl value属性。

    class Settings extends Component {
      constructor() {
        super();
        this.state = {
          descriptions: [],
          selectedJobValue: 'None'
        };

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

      componentDidMount() {
        this.props.fetchData('http://127.0.0.1:5000/api/1.0/descriptions');
      }

      handleJobSelect = evt => {
        const someVal = evt;
        console.log(someVal);
        console.log(this.state);
        this.setState({ selectedJobValue: someVal });
        console.log(this.state);
      };

      render() {
        const { selectedJobValue } = this.state;

        return (
           <InputGroup classname="mb-3">
               <DropdownButton
                  as={InputGroup.Prepend}
                  variant="outline-primary"
                  title="Description"
                  id="input-group-dropdown-1"
                  onSelect={this.handleJobSelect}
                >
                  {this.props.items.map(item => (
                    <Dropdown.Item href={item} key={item} eventkey={item}>
                      {item.toString()}
                    </Dropdown.Item>
                  ))}
                <Dropdown.Item href="#">Good item</Dropdown.Item>
                </DropdownButton>
                <FormControl
                  placeholder="Placeholder job description"
                  aria-label="Job description"
                  aria-describedby="basic-addon1"
                  value={selectedJobValue}
                  readOnly="True"
                />
             <InputGroup.Append>
                  <Button variant="outline-primary">Submit</Button>
             </InputGroup.Append>
          </InputGroup>

const mapStateToProps = state => {
  return {
    items: state.items,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    fetchData: url => dispatch(itemsFetchData(url))
  };
};

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

我怀疑我尝试同时使用本地和全局状态在此问题上是同谋的，但是鉴于我的申请计划，这似乎是无法避免的。有没有一种方法可以解决这个问题而不放弃Redux？

再检查几次代码后，我认为问题出在我使用href和handleJobSelect()函数的过程中。由于我的描述项目用斜杠表示相对文件路径，因此它们被视为有效的href，可以自己调用该页面，从而破坏了所有内容。是否可以通过我的handleJobSelect()函数提取目标下拉项的不同属性，例如其文本（即{item}）？

通过React Bootstrap DropdownButton和从数组呈现的下拉项更新本地状态

0 个答案: