array.map 中具有不同值的元素答案

【问题标题】：Element inside an array.map with different valuesarray.map 中具有不同值的元素
【发布时间】：2020-08-08 05:56:49
【问题描述】：

想要在 array.map 中使用 React Selector 并使用不同的值将它们保存在状态中。但是，它们最终具有相同的值。

我想要做的是有 4 个选择器，它们的值必须不同，但是当它们在 array.map 中呈现时，它们具有相同的值

非常感谢您的帮助，谢谢！

I want to have these selectors with different values

{Object.keys(json).map((key) => (
    <th key={key + (+ new Date() + Math.floor(Math.random() * 999999))}>                              
     <Select
      value={selectedOption}
      onChange={this.handleChange}
      options={options}
      />
      </th>
      ))}

【问题讨论】：

你是什么意思“他们最终具有相同的价值”？您能否还包括所有相关代码和资产，并清楚说明问题/问题是什么、您尝试解决的问题以及实际和预期的结果是什么？
你使用什么库？您要映射的这个 json 是什么？请提供更多详细信息。
我想使用这些选择器从 csv 数据键名中更改映射的 json，但它们具有相同的值
当然它们都具有相同的值？您正在映射 json 的键，但最终您总是渲染一个
那么我该如何解决呢？谢谢！

标签： arrays json reactjs

【解决方案1】：

TLDR：CodeSandbox 有点难以理解你想要什么，但我会尝试一下。

首先，您需要确保您的“key”属性在渲染之间保持不变，以确保组件不会卸载/重新安装。 React 使用密钥来确定组件是否必须卸载或更新。

其次，由于您是从数组中渲染选项，因此您需要有状态来保存任意数量的选项，并提供一种方法来更新每个选项的数组状态。

这意味着拥有像这样的状态和变异函数

  const [state, setState] = React.useState({});

  const handleChange = (key, value) => {
    setState((prevState) => {
      return { ...prevState, [key]: value };
    });
  };

然后每个选项将根据您的 json 对象中的“键”值更新一个状态。 Select 的值也将使用此键从 state 中获取。这也说明了为什么这个键在渲染之间应该保持不变。

   {Object.keys(json).map((key) => (
       <th key={key} style={{ width: "200px" }}>
           <Select
               value={state[key]}
               onChange={(value) => handleChange(key, value)}
               options={options}
            />
        </th>
    )}

我不确定您的 jsonfile 是什么样的，但我模拟了一些东西。将此配置存储在数组中并映射数组而不是在对象上使用 Object.Keys 迭代器可能会更好。但是，会保持原样。

结果如下

import React from "react";
import "./styles.css";
import Select from "react-select";

const json = { key1: "value1", key2: "value2", key3: "value3" };

const options = [
  {
    value: 0,
    label: "Option 1"
  },
  {
    value: 1,
    label: "Option 2"
  },
  {
    value: 2,
    label: "Option 3"
  }
];

export default function App() {
  const [state, setState] = React.useState({});

  const handleChange = (key, value) => {
    setState((prevState) => {
      return { ...prevState, [key]: value };
    });
  };

  return (
    <div className="App">
      <table columns>
        {Object.keys(json).map((key) => (
          <th key={key} style={{ width: "200px" }}>
            <Select
              value={state[key]}
              onChange={(value) => handleChange(key, value)}
              options={options}
            />
          </th>
        ))}
      </table>
    </div>
  );
}

【讨论】：