如何在地图函数REACT wordpress中使用地图函数

Question

我正在用React创建一个wordpress插件-在此之前我从未真正使用过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函数将一个新的解决方案对象推送到数组中，所以我已经有了数组。问题是我应该如何在屏幕上渲染它提前感谢

Answer 1

您犯了多个错误，让我们逐一检查：

1. 从React 18开始，render方法已被弃用，取而代之的是createRoot方法，以下是实现它的方法：

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

2. 最好将主DOMquestions作为功能组件，以便使用任何反应功能，如状态、回调等

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

3. 在react中映射数组时，必须使用key属性，这有助于react跟踪哪些项已更改

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

4. 您的输入更改事件写得不正确，我不确定您试图实现什么，但如果我要重写它，我会使用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 />
);

Answer 2

1-将"问题"；数组处于状态。

2-生成一个函数"；updateQuestions"；更新状态中的问题数组

3-在此处添加数组索引"；DOMquestions=questions.map((questions，index("；

4-在onClick上将问题对象的索引发送到此功能"onClick={((=>updateQuestions(index(}">

5-现在在updateQuestions中从"；问题"；像一样通过这个索引排列

questionsArray=｛…问题｝const question=questionsArray[index]

并添加附加问题对象到函数。添加问题数组[索引]。adds(问题(

6-现在用这个新的questionArray setQuestions([…questionsArray](更新问题状态