Обновление локального состояния с помощью React Bootstrap DropdownButton и выпадающих элементов, отображаемых из массива - PullRequest
Новая
       11

Обновление локального состояния с помощью React Bootstrap DropdownButton и выпадающих элементов, отображаемых из массива

0 голосов
/ 04 мая 2019

Я создаю приложение, которое получает список заданий из бэкэнда и принимает пользовательский ввод, чтобы выбрать один из них вместе с несколькими параметрами, чтобы сделать второй бэкэнд-запрос. Поскольку будет задействовано еще несколько компонентов, я решил использовать Redux для управления глобальным состоянием, и это, кажется, вызывает сложности в моем коде.

Мой компонент DropdownButton использует handleJobSelect для изменения локального состояния и, таким образом, показывает текущее selectedJobValue в качестве значения компонента FormControl, и все выглядит хорошо, если мои элементы отображаются напрямую (например, «Хороший элемент» в коде ниже). Однако если я использую извлеченный список для сопоставления своих элементов, выбор одного из них каким-то образом приведет к перезагрузке всего веб-сайта, потере всех изменений состояния и сбросу как свойства selectedJobValue, так и свойства значения FormControl. 

    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(). Поскольку мои элементы описания представляют относительные пути к файлам с косой чертой, они читаются как допустимые ссылки, которые могут сами вызывать страницу, тем самым разрушая все. Можно ли извлечь через мою функцию handleJobSelect() различные свойства целевого выпадающего элемента, например, его текст (то есть {item})?

...