Блог

Главная - Вопросы по программированию - Преобразование компонента с сохранением состояния в компонент без состояния

Преобразование компонента с сохранением состояния в компонент без состояния

#reactjs

Вопрос:

У меня есть этот рабочий компонент с отслеживанием состояния в React:

 import React, {Component}  from "react";

class MyComponent extends Component {
  constructor() {
    super();
    this.myRef = React.createRef();
    this.state = {
            array: [],
            noresults: false
        };
  }
  
  loadData = () => {
    let data = this.myRef.current.value;
    let url = "someurl=" data;
    if(!data) {
      return;
    }
        fetch(url)
            .then((res) => res.json())
            .then((json) => {
                if(json.data.length > 0) {
                  this.setState({
                      array: json.data,
                      noresults: false
                  });
                } else {
                  this.setState({
                      noresults: true
                  });
                }
                
            })
    }
render() {
  const { array, noresults } = this.state;
  return (
    <div>
      <section>
        <input ref={this.myRef} type="number"/>
        <button onClick={this.loadData}>Click Here</button>
      </section>

    
    <ul>
        
        {
                array.map((e) => ( 
                <li key = { e.key } >
                    { e.data }
                    </li>
                ))
            }
      </ul>

      {noresults amp;amp; <div>No Records</div>}
    </div>
  );
}
}

export default MyComponent

Я хочу преобразовать это в безгосударственное, как это:

 function MyComponent() {

  return (
    <div>
      <section>
        <input type="number"/>
        <button>Click Here</button>
      </section>

      <ul>
        <li></li>
      </ul>

      <div>No Records</div>
    </div>
  );
}

export default MyComponent

Теперь, как я могу передать данные ввода в свой метод для вызова API. Также как передать ответ от API для отображения в виде элементов ul и li?

Комментарии:

1. Ответ заключается в том, что вы не должны делать этого в React. React предпочел бы, чтобы вы делали это с входными данными, управляемыми состоянием, а не с неконтролируемыми входными данными без состояния. Выполнение того, чего вы хотели бы достичь, отнимает большую часть ценности декларативного программирования, которое предлагает React. Но если вы хотите это сделать, просто сделайте это точно так же, как в ванильном javascript, при нажатии кнопки вызовите функцию, которая захватывает элементы со страницы, или используйте ссылки для достижения той же цели, захватите свойство value ввода и передайте его своему API.

Ответ №1:

Просто передайте его как реквизит компонента:

 const MyComponent = ({array = [], loadData = () => {}}) => {
  const [inputValue, setInputValue] = useState();
  
  const handleInputChange = (evt) => {
    setInputValue(evt.target.value);
  };

  return (
    <div>
      <section>
        <input type="number" onChange={handleInputChange} />
        <button onClick={e => loadData(e, inputValue)}>Click Here</button>
      </section>

      <ul>
          {array.map((e) => (<li key={e.key}>{e.data}</li>))}
      </ul>

      {array.length === 0 amp;amp; <div>No Records</div>}
    </div>
  );
}

Для ввода я создал локальное состояние, которое обновляется при изменении ввода, и передал его loadData функции. Вы можете получить доступ к текущему значению с помощью loadData функции параметризации:

 loadData = (e, currentInputValue) => { ... };

Комментарии:

1. Я думаю, что вы, возможно, пропустили ту часть его поста, где он сказал, что хочет передать текущее значение своих входных данных в свой API при нажатии этой кнопки.

2. Как передать значение <input type="number"/> в метод loadData?

3. @учащийся Обновлен

Метки: