Перейдите на JSON и добавьте кнопки в React

Question

Я новичок в React, и у меня есть проблема в этом коде:

class Tests extends React.Component {

   async getTests() {
    var url = "http://127.0.0.1:100/getTestList"
    var buttons=[];
    const resp = await fetch(url);
    const data = await resp.json();

    for(let pkg in data){ 
        console.log(pkg);
        for (let cls in data[pkg]){
            console.log(cls);

            for (var i = 0; i < data[pkg][cls].length; i++) {
                let m= data[pkg][cls][i];
                buttons.push(<button value={cls}>{m}</button>);
            }
        }
    }

    return buttons;

}
render(){
    return(
        <div>
            <h4>Using .map()</h4>
            {this.getTests()}

        </div>
    )
}

}//fine classe

// ========================================

ReactDOM.render(
  <Tests />,
  document.getElementById('root')

);

Я правильно понимаю JSON Ответ от службы POST, итерируйте правильно JSON, чтобы получить массив кнопки со значением и текстом, но у меня есть эта ошибка на Chrome:

Ошибка: объекты недопустимы как дочерний элемент React (найдено: [обещание объекта]). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив. в div (в src / index. js: 95) в тестах (в src / index. js: 108)

Некоторые советы? С уважением

Answer 1

getTests() - это асинхронная функция c, которая всегда будет возвращать объект обещания. React жалуется, потому что вы передаете объект обещания методу рендеринга.

Вы можете сохранить ответ API в состоянии и установить состояние в методе getTests. React обновит ui при обновлении состояния.

Несколько изменений в коде.

1. Создание состояния
2. Запуск метода getTests() in componentDidMount .
3. L oop над значениями в методе рендеринга.

Пример:

class Tests extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            buttons: []
        }
    }
    async getTests() {
        var url = "http://127.0.0.1:100/getTestList"
        var buttons = [];
        const resp = await fetch(url);
        const data = await resp.json();
        for (let pkg in data) {
            console.log(pkg);
            for (let cls in data[pkg]) {
                console.log(cls);
                for (var i = 0; i < data[pkg][cls].length; i++) {
                    let m = data[pkg][cls][i];
                    buttons.push({ value: cls, displayName: m });
                }
            }
        }
       this.setState( () => {
            return {
                buttons
            }
        });
    }
    async componentDidMount() {
        await getTests();
    }
    render() {
        return (
            <div>
                <h4>Using .map()</h4>
                {this.state.buttons.map(button => <button key={button.value} value={button.value}>{button.displayName}</button>) }
            </div>
        )
    }
}//fine classe
// ========================================
ReactDOM.render(
    <Tests />,
    document.getElementById('root')
);

Или вы можете использовать функционал компонент для этого.

const ButtonGroup = () => {
    const [buttons, setButtons] = useState([]);

    useEffect(() => {
        await getTests();
    }, []);

    async function getTests() {
        const url = 'http://127.0.0.1:100/getTestList';
        const resp = await fetch(url);
        const data = await resp.json();
        const buttonData = [];
        for (let pkg in data) {
            for (let cls in data[pkg]) {
                for (var i = 0; i < data[pkg][cls].length; i++) {
                    let m = data[pkg][cls][i];
                    buttonData.push({ value: cls, displayName: m });
                }
            }
        }
        setButtons(buttonData);
    }

    return (
        <div>
            <h4>Using.map()</h4>
            {buttons.map(button =>
                (
                    <button key={button.value} value={button.value}>{button.displayName}</button>
                )
            )}
        </div>
    );
}

export default ButtonGroup;

Answer 2

Я бы использовал компонент функции с useState и useEffect для этого случая. В useEffect вы можете получить свои данные из конечной точки, затем, используя .map(), вы можете представить свои кнопки из массива, для которого вы создаете экземпляр useState.

. Пожалуйста, обратитесь к следующему решению, которое может решить проблему:

const Tests = () => {
   const [buttons, setButtons] = useState([]);

   useEffect(() => {      
      async getTests() {
         const url = 'http://127.0.0.1:100/getTestList';
         const resp = await fetch(url);
         const data = await resp.json();
         const fetchedButtons = [];

         for (let pkg in data) { 
            for (let cls in data[pkg]) {
                for (var i = 0; i < data[pkg][cls].length; i++) {
                    let m = data[pkg][cls][i];
                    fetchedButtons.push(<button value={cls}>{m}</button>);
                }
            }
         }

         setButtons(fetchedButtons);
      }

      getTests();   
   }, []);

   return <div>
       <h4>Using.map()</h4>
       {/* here mapping the buttons array */}
       {
          buttons && buttons.map(e => e);          
       }
   </div>
}

Надеюсь, это поможет!

Answer 3

ожидается эта ошибка. Из вашего кода метод getTest возвращает массив кнопок. Вы не можете визуализировать массив или объект из реагирующего компонента.

Вместо этого вы можете: 1. сделать кнопки переменной состояния, 2. установить состояние после подготовки локального массива в вашем методе getTest. 3. используйте математический метод для отображения тега кнопки, который вы определили в массиве.

, пожалуйста, примите этот ответ, если он вам помог.