使用map函数向状态添加多个元素
使用map函数向状态添加多个元素
提问于 2022-07-29 11:01:06
我有两个按钮，Single Component和Multiple Component。
当我单击Multiple Component时，我希望它添加3个组件，但它只添加了1个组件。
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { observer } from "mobx-react-lite";
function App() {
const [component, setComponent] = useState([]);
useEffect(() => {});
const newArray = [1, 2, 3];
const Test = observer(() => {
return (
<div>
<p>Test</p>
</div>
);
});
const Test2 = observer(() => {
return (
<div>
<p>Test2</p>
</div>
);
});
const Test3 = observer(() => {
return (
<div>
<p>Test3</p>
</div>
);
});
async function MultipleComponent() {
newArray.map(async (x) => {
if (x === 1) {
await setComponent([...component, Test]);
} else if (x === 2) {
await setComponent([...component, Test2]);
} else {
await setComponent([...component, Test3]);
}
console.log(x);
});
}
return (
<div>
{component.map((Input, index) => (
<Input components={component} key={index} />
))}
<button onClick={() => setComponent([...component, Test])}>
Single Component
</button>
<button onClick={() => MultipleComponent()}>Multiple Component</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);编码盒：https://codesandbox.io/s/react-hooks-useeffect-forked-edmgb5
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-29 11:04:07
在await上使用setState是没有意义的，因为任何地方的文档都不认为这是个好主意。另一方面，您需要使用接受更新器函数的setState版本，在那里您可以获得先前的状态。
setComponent(ps=>[...ps, Test2])另外，我没有到官方文档的链接，但我也不确定状态内的storing组件是个好主意。您可以在状态中存储某些标识符，该标识符指示它是哪个组件，然后在时间到来时呈现该标识符。我的意思是：
let Test1 = (props) => {
return <div>1</div>;
};
let Test2 = (props) => {
return <div>2</div>;
};
let GeneralComponent = (props) => {
if (props.comp === '1') return <Test1 />;
if (props.comp === '2') return <Test2 />;
return null;
};
export default function App() {
let [comp, setComp] = React.useState('1');
return (
<div onClick={() => setComp(comp === '1' ? '2' : '1')}>
<GeneralComponent comp={comp} />
</div>
);
}GeneralComp接受要呈现的组件的标识符，该标识符存储在父级的状态中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73165651
复制相关文章
相似问题
腾讯云开发者
