如何返回多次相同的组件但具有独立状态？

Question

嗨，React中的大家，我想做类似的渲染范围函数中的组件2倍，

const Main()=>{

const [names, setNames] = useState([]);
const [selected, setSelected] = useState(-1);

return(
    <Component1 name={names[selected].name}
                setName={setNames}/>

    <Component1 name={names[selected].name}
                setName={setNames}/>
)
}

我通过setnames从main（） 到component1 setnames /代码>处理状态 并从main（）传递names，然后在选择component1

<StyledSelect
       ml="10px"
       onChange={(e) => {
       setName(e.target.value);
        value={name}>
       {names.map(({ name}) => {
         return (
                <option key={name} value={name}>
                  {name}
                </option>
                );
         })}

我的组件中映射它的html select，其中包含名称，当我选择一个时，它触发了一个IT触发a IT IT在数据库中并检索名称数据（年龄，位置），问题是当我在第二个Component1上选择名称时，它还将选择相同的名称并在我的第一个组件上检索相同的名称数据，我希望它们独立。如何 ？

我试图放下那样的钥匙

return(
    <Component1 key="compare" name={name}/>
    <Component1 key="compared" name={name}/>
)

，但没有任何变化，

感谢

Answer 1

这个问题措辞错误（这与状态无关，与道具以及反应渲染方式无关）并且缺少信息，但是这里有一些可能会有所帮助的信息：

• 钥匙不会更改前面的任何内容-结尾;它们是一种工具React用途来提高后端的性能。 单击此处以阅读文档以获取有关钥匙的更多信息以及如何反应。使用它们。
• React组件是JavaScript函数，因此只能返回1件。您共享的代码样本将在React（或JavaScript）中不起作用。为了返回多个项目，可以将它们包裹在数组或React片段中。考虑此示例：

    render() {
      return (
        <React.Fragment>
          <ChildA />
          <ChildB />
          <ChildC />
        </React.Fragment>
      );
    }

如果要使下拉列表的外观和/或功能不同，则name Prop将需要不同。目前，component1的两个实例都得到了相同的name属性，这就是为什么它们看起来和表现相同的原因。

Answer 2

（我想发表评论，但不能）

我不确定（我必须看到完整的代码），但我认为：

return(
    <Component1 key="compare" name={name}/>
    <Component1 key="compared" name={name}/>
)

必须

return(
    <Component1 key="compare" name={name1}/>
    <Component1 key="compared" name={name2}/>
)

这样的方式它们不共享相同的变量

Answer 3

您在哪里打电话并设置名称？由于您将相同的道具名称传递给两个人，它们将是相同的。
要么在组件1本身内设置名称，要么为每个组件创建不同的状态。

Answer 4

我也有类似的情况，但就我而言，这是我需要使独特的ID。
我有一个组件，该组件在React Bootstrap的组中渲染了一个受控toggleButtons的列表。我想显示2个按钮列表，既包含在不同类别下可以选择的名称列表。最后，我必须设置ID而不是密钥。我最初将其设置为列表的索引。但是，当然，这两个列表都具有相同的索引，因此只有第一个具有状态并按下第二个列表将从第一个列表中选择或取消选择。为了解决它，我通过道具向下传递了一个ID，然后将ID附加到索引中以使其与众不同。

      function ToggleList({ variant = 'secondary', vertical = true, ...restProps }) {
  var items = restProps.list ? restProps.list.map((subject, index) => {
    return <ToggleButton
      className="mb-2"
      size="sm"
      id={`${restProps.id}-${index}`}
      type="checkbox"
      value={subject}
      variant={variant}>
      {subject}
    </ToggleButton>;
  }) : '';