如何将功能反应组件传递给函数?

Question

所以我在这里想要实现的是将整个组件存储在父组件的数组中，父组件使用其索引在数组中呈现特定组件，例如:

export const Test = () => {
const [components, setComponents] = useState([
<Order key={1} />,
<Order key={2} />,
<Order key={3} />,
]);
const [index, setIndex] = useState(0);
return (
<div>
<button onClick={() => setIndex((old) => (old + 1) % components.length)}>
change
</button>
{`page ` + index}
{components[index]}
</div>
);
};
const Order = () => {
const [someState, setSomeState] = useState(1);
return (
<div>
<button onClick={() => setSomeState((old) => old + 1)}>
{someState}
</button>
</div>
);
};

当我改变一个项目的状态时，然后循环遍历项目，然后返回到我改变其状态的项目，我发现它没有更新

我发现的是数组中的组件(在Test组件中)没有更新，我不知道如何更新它

我不想做的是将订单项的状态存储在父项中并将其作为props传递(因为使其工作将是一个痛苦)

Answer 1

const App = ({ flag }) => {
if (flag) <Order />
return null
}

我给你一个例子，这样我就可以解释在你的情况下会发生什么。如果标志从true变为false，则应用程序变为空白。但是Order发生了什么呢?它没装上，怎么了?因为当React比较前一个场景和当前场景时，它注意到不再有这样的Order了。那么您对Order组件(称为光纤)的内存有什么看法?

我猜答案是，内存将被删除，并将被收集以供将来使用。

现在回到您的案例，您正在使用id切换到不同的组件。但是从理论上讲，对于每个组件，它的行为应该与我的示例非常相似。

注意:如果你想使用一个数组，那是可以的，但是所有的组件都必须在任何时候呈现，你可以隐藏它们，但是你不能卸载它们中的任何一个。

Answer 2

我不想做的是将订单项的状态存储在父类并将其作为props传递(因为创建它会很痛苦)工作)

你的问题是，当你呈现一个Test组件，然后增加索引，然后你呈现另一个Test组件与不同的关键，所以反应和解算法卸载旧的一个，你失去状态。

你有两个选择:

• 将每个Test组件的状态提升，然后当其中一个被卸载时，您将以旧状态重新挂载它，因为状态将存储在parent中，它不会丢失
• 另一个选项是渲染所有组件，只显示那些你想使用CSSdisplay属性，这样他们都不会被卸载，你保留状态。下面是示例:

const Order = () => {
const [someState, setSomeState] = React.useState(1);
return (
<div>
<button onClick={() => setSomeState((old) => old + 1)}>
{someState}
</button>
</div>
);
};
let components = [<Order />, <Order />, <Order />];
const Test = () => {
const [index, setIndex] = React.useState(0);
return (
<div>
<button onClick={() => setIndex((old) => (old + 1) % components.length)}>
change
</button>
{`page ` + index}
{[0, 1, 2].map((x) => (
<div key={x} style={{ display: index === x ? "block" : "none" }}>
{components[x]}
</div>
))}
</div>
);
};

ReactDOM.render(
<Test />,
document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

PS我已经从状态中删除了components，我现在找不到官方信息，但恕我直言，在状态中存储组件不是个好主意。