javascript 在React中迭代JSON并添加按钮

56lgkhnf 于 2023-05-27 发布在 Java

关注(0)|答案(3)|浏览(128)

我是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')

);

我从POST服务中正确地获取JSON响应，正确地迭代JSON以获得一个包含值和文本的按钮数组，但我在Chrome上遇到了这个错误：
错误：对象作为React子对象无效（找到：[object Promise]）。如果你想呈现一个子级集合，请使用数组代替。in div（at src/index.js：95）in Tests（at src/index.js：108）
一些提示？谢谢

JavaScript

来源：https://stackoverflow.com/questions/60770644/iterate-on-json-and-add-buttons-in-react

3条答案

按热度按时间

jhiyze9q1#

在这种情况下，我将使用一个带有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>
}

我希望这对你有帮助！

赞(0）回复(0）举报 2023-05-27

c7rzv4ha2#

getTests()是一个异步函数，它总是返回一个promise对象。React正在抱怨，因为你正在向render方法传递一个promise对象。
你可以将API响应存储在一个状态中，并在getTests方法中设置这个状态。React将在状态更新时更新ui。
代码中的一些变化。
1.创建状态
1.运行getTests() in componentDidMount方法。
1.循环遍历render方法中的值。

示例：

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;

赞(0）回复(0）举报 2023-05-27

3phpmpom3#

该错误是预期的。getTest方法从代码中返回一个按钮数组。不能从react组件渲染数组或对象。
相反你可以
1.使按钮成为状态变量，
1.在getTest方法中准备一个本地数组后设置状态。
1.使用math方法渲染你在数组中定义的按钮标签。

赞(0）回复(0）举报 2023-05-27