Как в React показать только результат, а кнопка исчезнуть JS

Question

У меня несколько проблем. Я буду рад и благодарен, если кто-то поможет.

1. В первом случае, когда я нажимаю кнопку, чтобы показать массив параметров, который я получаю через props от родительского компонента. Он показывает, что options.map не является функцией. Но в concole.log () this.state.options заполняется реквизитами при нажатии кнопки. Мне нужна кнопка, но когда я нажимаю, она исчезает, и отображается единственный список массива.

    import React, { Component } from 'react';
   
    class DoctorSelectTiming extends Component {
      state = {
        options: [],
        isLoading: false
      } 
   
      selectTiming = (props) => {
        const setItems = this.state.options.push(...this.props.props);
        this.setState({options: setItems, isLoading: true});
        console.log(this.state.options );
      }
   
      render() {
        const {isLoading, options } = this.state;
        return (
          <div>
          {!isLoading ? <button onClick={this.selectTiming}>Select Timing</button> : (options.map(option => <li>{option}</li>))
          }
          </div>
              )
      }
    }
   
    export default DoctorSelectTiming;
   

Answer 1

Вместо этого сделайте это в своей функции selectTiming:

selectTiming = () => {
   // set the loading to true first and setting it to false afterwards.
   this.setState({ isLoading: true });
   const newItems = [...this.props.props];
   this.setState({ options: newItems, isLoading: false });
}

Вы назначаете this.state.options.push(...this.props.props), что теоретически возвращает ТОЛЬКО длину массива после того, как элемент был помещен в массив.

Это пример кода того, что вы сделали:

const arr = [1,2,3,4]
console.log(arr) // [1,2,3,4]
const anotherArr = []
const newArr = anotherArr.push(arr) // assigning it to newArr will only return the length 
                                    // of the array after it was pushed.
console.log(newArr) // 4

Итак, лучшим подходом было бы присвоение setItems фактического значения this.props.props вместо непосредственного изменения фактического состояния, которое это ПЛОХАЯ практика. Кроме того, аргумент props не нужен, поскольку свойства уже доступны локально в вашем компоненте.