重新渲染 Material-Ui 的 Select 选项

Question

如何重新渲染 material ui select 中的 <option> </option>？

我想做的是使用 material ui select

将数据从 1 个对象数组移动到下一个对象数组

{transferData.map(data => (
   <option key={some key value} value={some value}>
      {data.name}
   </option>
 ))}

I console.log transferData 我在其中执行处理程序，控制台显示对象数组根据 onClick 更新，但数据未呈现到屏幕。它仍然显示初始的空选项列表。

所以我有 3 个对象数组。
Array1 - 保存数据
Array2 - 保存来自 material ui select
的 selected 数据 Array3 - onClick 后，将数据从 array2 移动到 array3

更新*
将数据传输到 array3 时，该选项有一个我可以单击的不可见选项，但我看不到与 array1

中相同的文本

Answer 1

听起来您正在将一些任意值传递给 key={some key value}。这可能是问题所在。

您应该传递与其映射到的数组对象相关的任何唯一值：

{transferData.map(data => (
   <option key={data.id} value={data.id}> <--- pass the ID to key
      {data.name}
   </option>
 ))}

这样，当 transferData 的值从空白数组 [] 变为对象数组 [{id: 'foo', name: 'Foo'}] 时，React 明白它必须更新 UI .

请阅读 the React docs on Keys 了解更多信息。

Answer 2

再见，我制作了 this codesandbox 示例。如您所见，我在 5 秒后在第一个 Select 上加载数据（setTimeout 在 useEffect 上）。 Select 上的数据将正确显示。

// this is the first loading on transferData
const firstRender = useRef(true);
  useEffect(() => {
    if (firstRender.current) {
      setTimeout(() => {
        let data = [
          { id: 1, name: "name 1" },
          { id: 2, name: "name 2" },
          { id: 3, name: "name 3" },
          { id: 4, name: "name 4" }
        ];
        setTransferData(data);
      }, 5000);
      firstRender.current = false;
    }
  }, []);

然后，如果您 select 来自第一个 Select 的 1 个值，我将填充连接到第二个 Select 的数组，并且在这种情况下也会显示数据。

// this is the hadle to fill the secod Select with data selected on first one
const handleChange = (event, object) => {
    let result = [...selectedData];
    result.push(transferData[object.key - 1]);
    setSelectedData(result);
 };

2个Select是这样的：

return (
    <div>
      <Select
        defaultValue={""}
        onChange={handleChange}
        className={classes.select}
      >
        {transferData.map((data) => (
          <option key={data.id} value={data.id}>
            {data.name}
          </option>
        ))}
      </Select>
      <br />
      <Select defaultValue={""} className={classes.select}>
        {selectedData.map((data) => (
          <option key={data.id} value={data.id}>
            {data.name}
          </option>
        ))}
      </Select>
    </div>
  );

当然这只是一个示例（如果您尝试从第一个 Select 开始两次 select 相同的元素，您会在控制台中收到错误消息）。但是这样一来，数据就会从一个Select传递到另一个

Answer 3

我只是将 data.name 更改为数据，因为复制到 array3 的是对 array1 的字符串引用。这项工作。

重新渲染 Material-Ui 的 Select 选项

Re-Render Material-Ui's Select Option

javascript

typescript

reactjs

map-function

material-ui