用对象数组反应状态字段

Question

我在使用我的 React 状态时遇到问题。下面的设置有效，我可以访问我需要的数据，但是我希望扩展 'questions' 字段，使其成为一个对象数组而不是单个对象。

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>
        );

我是否需要映射所有 'ballots' 然后再次映射每个 'questions' 以获得其中的所有字段？如果我能更好地澄清这一点，请告诉我。下面是 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>
);

Answer 1

Would I need to map all the 'ballots' and then map again over each of the 'questions' to get all of the fields within it?

是的，您必须再次映射每个 'questions' 以获得其中的所有字段

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>
    );

用对象数组反应状态字段

React State Fields with Array of Objects

reactjs

react-state