Reactjs 使用对象数组反应状态字段

我很难让它与我的反应状态一起工作。下面的设置有效，我可以访问我需要的数据，但是我希望扩展“问题”字段，使其成为一个对象数组，而不是单个对象

this.state = { 
     ballots: [
        { 
        id: '2222' ,
        title: 'Test Ballot',
        questions: {title: 'Question 1', option: 'option 1' }
        }
    ]
    }

---

希望国家能像这样

this.state = { 
         ballots: [
            { 
            id: '2222' ,
            title: 'Test Ballot',
            questions: [{title: 'Question 1', options: ['option 1', 'option 2', 'option 3'] }, {title: 'Question 2', option: ['option 1', 'option 2', 'option 3']}]
            }
        ]
        }

我正在将这些值映射到另一个组件，如下所示

return (
            <div className='ballot-page'>
                {this.state.ballots.map(
                    ({id, ...props}) => (
                        <BallotForm key={id} {...props} />
                    )
                )}
            </div>
        );

返回(
{this.state.ballots.map(
（{id，…props}）=>(
)
)}
);

我是否需要映射所有的“选票”，然后再映射每个“问题”，以获得其中的所有字段？让我知道，如果我能澄清这一点更好。下面是BallotForm组件

const BallotForm = ({ title, questions }) => (
    <div className='ballot-form-page'>
        <div className='ballot-form'>
            <div className='ballot-title'>{title}</div>
            <span>{questions.title}</span>
            <form>
                <span>{questions.option}</span>
                <input type='checkbox'></input>
            </form>
        </div>
    </div>
);

const BallotForm=（{title，questions}）=>(
{title}
{问题.标题}
{问题.选项}
);

我是否需要映射所有的“选票”，然后再映射每个“问题”，以获得其中的所有字段

是的，您必须再次映射每个“问题”，以获得其中的所有字段

const BallotForm = ({ title, questions }) => (
      <div className='ballot-form-page'>
        <div className='ballot-form'>
          <div className='ballot-title'>{title}</div>
          {
            questions.map((singleQue) => {
              return (<>
                <span>{singleQue.title}</span>
                <form>
                  <span>{singleQue.option.join('')}</span>
                  <input type='checkbox'></input>
                </form>
              </>)
            })
          }
        </div>
      </div>
    );

const BallotForm=（{title，questions}）=>(
{title}
{
问题。地图（（单格）=>{
返回(
{singleQue.title}
{singleQue.option.join（“”）}
)
})
}
);

为了解决获得多张选票并通过单个复选框将所有选项显示为一个长选项的问题，我应该如何映射这些选项并将它们与单个复选框一起放入自己的选项中？似乎我应该把它分解成单独的组件，如果可能的话，我将进入总嵌套贴图。