如何使用Map功能内的Map功能REACT WordPress

gkl3eglg 于 2022-11-02 发布在 WordPress

关注(0)|答案(2)|浏览(164)

我正在创建一个WordPress插件与React-还没有真正使用过React在此之前，所以我可能误解了一些至关重要的东西，但这是我试图实现：您可以使用一个按钮来创建测验问题，然后向每个按钮添加多个解答：

DOMquestions = questions.map((question) =>

    <div>
        <div>
            {question.qIdTitle}
        </div>
        <div>
            Type: {question.qTypeTitle}
        </div>
        <div>
            Question title
            <input type={"text"} onChange={question.title = handleTextInputChange}></input>
        </div>
        <div>
            Question description
            <input type={"text"} onChange={question.desc = handleTextInputChange}></input>
        </div>
        <button onClick={() => question.addS(question)}>Add a solution</button>
        <div>
        {
                question.solutions.map((solution) =>
                    {
                        return <div>Solution data and fields appear here</div>
                    }

                )
        }
        </div>
    </div>
);

console.log(DOMquestions);
ReactDOM.render(<div class='w-100'>{DOMquestions}</div>, qc);

其思想是，每个Function对象都有一个数组，其中充满了解决方案对象
addS函数将一个新的解决方案对象推送到数组中-所以我已经有了数组。问题是我应该如何在屏幕上呈现它。

wordpress

来源：https://stackoverflow.com/questions/74262937/how-to-use-map-function-inside-a-map-function-react-wordpress

2条答案

按热度按时间

5q4ezhmt1#

你犯了多个错误，让我们一个一个地复习一下：
1.从React 18开始，render方法已被弃用，取而代之的是createRoot方法，您可以通过以下方式实现该方法：

const DOMquestions = () => <div>...</div>; 
const root = ReactDOM.createRoot(qc);
root.render(
  <DOMquestions />
);

1.最好让你的主DOMquestions成为一个函数组件，以便使用任何React功能，如状态、回调等

const DOMquestions = () => {
 return (
  // ...
 )
}

1.在react中Map数组时，必须使用key属性，这有助于react跟踪哪些项发生了更改。

questions.map((question) => (
 <div key={question.qIdTitle}>
  {/* ... */}
 </div>
)

1.你的输入改变事件写得不正确，我不知道你想达到什么目的，但是如果我重写它，我会用useCallback来改变输入，它看起来像这样。而且<input />是自结束标记，你不必用</input>

const handleTitleInputChange = React.useCallback(event => {
  question.title = event.target.value;
}, []);

return (
  <input value={question.title} onChange={handleTitleInputChange} />
)

最后，让我们将这些内容集中到一个位置：

const DOMquestions = () => {
  const handleTitleInputChange = React.useCallback((event, question) => {
    question.title = event.target.value;
  }, []);

  const handleDescInputChange = React.useCallback((event, question) => {
    question.desc = event.target.value;
  }, []);

  return (
    questions.map((question) =>
      <div key={question.qIdTitle}>
        <div>
          {question.qIdTitle}
        </div>
        <div>
          Type: {question.qTypeTitle}
        </div>
        <div>
          Question title
          <input value={question.title} onChange={event => handleTitleInputChange(event, question)} />
        </div>
        <div>
          Question description
          <input value={question.desc} onChange={event => handleDescInputChange(event, question)} />
        </div>
        <button onClick={() => question.addS(question)}>Add a solution</button>
        <div>
          {question.solutions.map((solution) => (
            <div key={solution.id}>Solution data and fields appear here</div>
          ))}
        </div>
      </div>
    )
  )
}

const root = ReactDOM.createRoot(qc);
root.render(
  <DOMquestions />
);

赞(0）回复(0）举报 2022-11-02

ttp71kqs2#

1-将“questions”数组置于一个状态。
2-创建一个函数“updateQuestions”来更新状态中的问题数组
3-在此处添加数组索引“DOMquestions = questions.map（（问题，索引）”
4-在onClick上将问题对象的索引发送给此函数。“onClick={（）=〉updateQuestions（index）}”
5-现在在updateQuestions中，通过以下索引从“questions”数组中获取问题对象：
问题数组= {...问题}常量问题=问题数组[索引]
和add将问题对象附加到函数中。adds questionsArray[index].addS（question）
6-现在，使用这个新的questionArray setQuestions（[... questionsArray]）更新问题状态

赞(0）回复(0）举报 2022-11-02

我来回答

如何使用Map功能内的Map功能REACT WordPress

2条答案

相关问题

热门标签

最新问答