reactjs - 如何在 React 中显示来自状态的数据？

Question

我试图创建一个结构来响应具有图像的数据和选择的选项。

如果选择了该选项，则只有提交按钮应显示成功警报。

我创建了一个包含详细信息的 Json 数据

这是代码沙箱链接：https ://codesandbox.io/s/fast-paper-d62f8?file=/src/App.js

这是我所期望的，但我的代码抛出错误。

这是我尝试过的

    return (
        <div>
            <table>
                <tbody> 
                    {
                        Object.keys(state.Data).map(key => (
                            <tr>
                                <td>{state.Data[key].QUIZ}</td>
                            </tr>
                            <tr>
                                <td>{state.Data[key].Images}</td>
                            </tr>
                            {
                                state.Data[key].options.map(option => (
                                    <div>
                                        <div>
                                            {option}
                                        </div>
                                    </div>
                                ))
                            }
                            <button onClick = {showAlert}>{state.Data[key].buttonLabel}</button>
                        ))
                    }
                </tbody>
            </table>

        </div>
    );
};

标签： reactjs

Answer 1

您在 return 语句和数组方法中犯了一些错误。

试试下面的代码：

Object.keys(state.Data).map(key => 
    <>
        <tr>
            <td>{state.Data[key][0].QUIZ}</td>
        </tr>
        <tr>
            <td>{state.Data[key][0].Images}</td>
        </tr>
        {
            Object.keys(state.Data[key][0].options[0]).map(option => 
                <div>
                    <div>
                        {state.Data[key][0].options[0][option]}
                    </div>
                </div>
            )
        }
        <button onClick = {showAlert}>{state.Data[key][0].buttonLabel}</button>
    </>
)