как получить данные из api в дочернее поле со списком в React - PullRequest
Новая
       7

как получить данные из api в дочернее поле со списком в React

0 голосов
/ 04 августа 2020

Я не могу переместить свой код в дочерний компонент, как я могу решить эту проблему. так что я могу использовать свои данные API в моем поле со списком 

async getData() {
const PROXY_URL = 'https://cors-anywhere.herokuapp.com/';
const URL = 'my-api';
const res = await axios({
  method: 'post', // i get data from post response
  url: PROXY_URL+URL, 
  data: {
    id_user : this.props.user.id_user
  }
})

const {data} = await res;
this.setState({ user : data.data})
}

componentDidMount = () => {
    this.getData()
  }

, и я отправляю свое состояние в свое поле со списком в дочернем компоненте 

      <ComboBox
        name="pic"
        label="Default PIC"
        placeholder=""
        refs={register({ required: true })}
        error={errors.PIC}
        message=""
        labelFontWeight="400"
        datas={this.state.user}
      ></ComboBox>

код комбинированного списка: прямо сейчас я просто хочу быть в состоянии консоль мои данные индекса 

let ComboBox = props => {
useEffect(() => {
for (let i = 0; i < props.datas.length; i++) {
  console.log(i) //this can use if using hard props or manual data
  props.datas[i].selected = false;


  props.datas[i].show = true;
}
setDatas(props.datas);


document.addEventListener('click', e => {
  try {
    if (!refDivComboBox.current.contains(e.target)) {
      setIsOpen(false);
    }
  } catch (error) {}
});

unSelectedComboBox();
}, []);
export default ComboBox;

1 Ответ

1 голос
/ 04 августа 2020

Я думаю, вам не хватает зависимости props.datas в вашем компоненте ComboBox. 

let ComboBox = props => {
useEffect(() => {
for (let i = 0; i < props.datas.length; i++) {
  console.log(i) //this can use if using hard props or manual data
  props.datas[i].selected = false;


  props.datas[i].show = true;
}
setDatas(props.datas);


document.addEventListener('click', e => {
  try {
    if (!refDivComboBox.current.contains(e.target)) {
      setIsOpen(false);
    }
  } catch (error) {}
});

unSelectedComboBox();
}, [props.datas]); // THIS IS THE DEPENDENCY ARRAY, try adding props.datas here
export default ComboBox;

Вот краткое объяснение useEffect.

Используется как componentDidMount(): 

useEffect(() => {}, [])

Используется как componentDidUpdate() (срабатывает после props.something изменений): 

useEffect(() => {}, [props.something])

Используется как componenWillUnmount(): 

useEffect(() => {
  return () => { //Unmount }
}, [])

Это, конечно , это действительно простое объяснение, и его можно использовать гораздо лучше, если его правильно усвоить. Взгляните на некоторые руководства, использующие useState, попробуйте найти, в частности, миграции с this.state на useState - это может помочь вам понять useState

...