小编Bor*_*nov的帖子

我正在使用 material-ui 自动完成功能。我将一些状态数组传递给它的属性选项。我面临的问题是 getOptionLabel：

Material-UI: The `getOptionLabel` method of Autocomplete returned undefined instead of a string for [""].

Run Code Online (Sandbox Code Playgroud)

我有 2 个组件。孩子一是：

const StateSelect = (props) => {
  const classes = useStyles();
  const handlePick = (e, v) => {
    props.setState(v);
  };
  return (
    <Autocomplete
      className={classes.inputStyle}
      options={states}
      getOptionLabel={(option) => (option ? option.name : "")}
      onChange={handlePick}
      value={props.state}
      renderInput={(params) => (
        <TextField {...params} label="State" variant="outlined" />
      )}
    />
  );
};

在父组件中，我调用了这个子组件：

 <StateSelect
            state={selectedState}
            setState={(state) => setSelectedState(state)}
          />

在父级中，我有一个 React 钩子来控制 StateSelect 的值：

  const [selectedState, …

我具有具有多项选择权限的自动完成功能。

https://codesandbox.io/s/bold-jackson-dkjmb?file=/src/App.js

在示例中，我有 3 个城市选项。当选择某些内容时，如何在 TextField 中手动添加自动添加值？

换句话说：

 renderInput={(params) => {
        console.log(params);
        return (
          <TextField
            {...params}
            variant="outlined"
            label="Cities"
            placeholder="Enter cities"
            autoComplete="off"
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <React.Fragment>
                  {params.InputProps.endAdornment}
                </React.Fragment>
              )
            }}
          />
        );
  }}

我希望能够在渲染文本字段之前向params.InputProps.startAdornment添加一个值。

由于每个选定的对象似乎都是非常复杂的对象，我如何手动执行此操作（push() 太复杂了）？任何想法如何我可以添加这样的对象：

手动？

我正在从本地服务器后端接收数据，我想加载图像。我收到这样的对象数组：

[ {
        "t_pdno": "SFC093989",
        "t_mitm": "SLS005251ACL-3382012763-1",
        "t_qrdr": 60,
        "Operations": "10,20,30,40,60,70",
        "path": "\\\\192.168.1.245\\Images\\ACL-3382012763-1.jpg"
    },
    {
        "t_pdno": "SFC093991",
        "t_mitm": "SLS005251ACL-3382012765-1",
        "t_qrdr": 120,
        "Operations": "10,20,30,40",
        "path": "\\\\192.168.1.245\\Images\\ACL-3382012765-1.jpg"
    },]

在我 console.log(rowData.path) 后，路径看起来像这样：

\\192.168.1.245\图像\ACL-3382014766-1.jpg

因此，粘贴到浏览器中是完美的，我得到了图像：

问题是我无法将其加载到我的img标签中。我试过：

<img
    src={process.env.PUBLIC_URL + rowData.path}
    alt={`${rowData.t_mitm}`}
     loading="lazy"
              />

<img
     src={rowData.path}
     alt={`${rowData.t_mitm}`}
     loading="lazy"
              />




  <img
      src={require(rowData.path)}
      alt={`${rowData.t_mitm}`}
      loading="lazy"
                  />



 <img
      src={`url(rowData.path)`}
      alt={`${rowData.t_mitm}`}
      loading="lazy"
                  />

没有任何效果。我怎样才能加载图像？

更新：

如果我将 http-server 安装到 \\192.168.1.245 服务器并在特定端口上托管图像文件夹，我就可以接收图像。但这意味着我将始终必须托管文件夹。

更新2：

如果我尝试像这样加载图像：

   <img
          src={`file://192.168.1.245/Images/${rowData.t_mitm}`}
          alt={`${rowData.t_mitm}`}
          loading="lazy"
                      />

它可能有效，但我得到：

不允许加载本地资源：file://192.168.1.245/Images/ACL-3382012763-1.jpg

首先，我无法提供 SQL Fiddle，因为要重新创建数据真的很复杂。我将尝试尽可能清楚地呈现查询、输出和问题。

我有一个看起来像这样的查询：

with cte(MainArt,secondaryArt, Quantity) as(
SELECT t_mitm, t_sitm, t_qana
            FROM ttibom010201 
        WHERE TRIM(t_mitm) = 'ACL-4812070395-4'
union all
select 
ttibom010201.t_mitm, ttibom010201.t_sitm, ttibom010201.t_qana
from ttibom010201 inner join cte on cte.secondaryArt=ttibom010201.t_mitm
        )
select    cte.* ,dsc.t_cuni, dsc.t_dsca from cte
left join ttcibd001201 dsc on dsc.t_item = cte.secondaryArt 
where TRIM(secondaryArt)  like N'30%'

这个确切的查询返回了这 4 行：

从另一个表中，我使用这个secondArt值来获取一些信息：

select top 1 t_orno, t_item,t_pric from ttdpur401201 where t_item like '%30102024%' order by  t_ddte desc

结果是：

正如您所看到的 t_item 和 secondaryArt 是相同的（第一个查询的第 3 行和第 4 …

我有从其他文件接收数据并设置为状态的组件：

const [sortedPlans, setSortedPlans] = useState(
    data.Plans.sort((a, b) => b.IndustryGrade - a.IndustryGrade)
  );//data is from external file

设置状态、对数据进行排序并渲染初始屏幕后，我有一个函数可以在调用时对排序计划进行排序：

const sort = (event) => {
    console.log(event);
    const newArr = sortedPlans.sort((a, b) => {
      return b[event] - a[event];
    });
    console.log(newArr);
    return setSortedPlans(newArr);
  };

问题是这永远不会触发组件的重新渲染。我希望当我设置新状态时能够在 jsx 中看到它。为什么当我 console.log(newArr) 时结果已正确排序，但状态的此设置未触发重新渲染？这是沙箱：

https://codesandbox.io/s/charming-shape-r9ps3p?file=/src/App.js

我从今天早上开始在互联网上搜索我的问题，但没有结果。这是我在 Chrome 控制台中看到的内容：

ContentDispatcherService：没有事件 URLS_SAFE_CHECK__STATUS_UPDATED 的监听器

任何想法可能导致这种情况？

我在 AppBar 组件中使用 Material-ui Tablist。问题是我有太多选项卡，我想让它们响应 - 当我的屏幕较小时，其中一些选项卡不可见。

该组件的文档：

https://material-ui.com/components/tabs/

你可以看到当我有这么多标签时它是如何隐藏鞋楦的：

https://codesandbox.io/s/nervous-hoover-809s0?file=/src/App.js

当有其他组件不可见时，是否可以在 AppBar 组件下添加类似滚动条或左右小箭头之类的东西？

可能应该在本节中添加滚动或箭头：

 <AppBar position="static">
            <TabList onChange={handleChange} aria-label="simple tabs example">
              <Tab label="Business Info" value="1" icon={<ContactMailIcon />} />
              <Tab label="Financial" value="2" icon={<MonetizationOnIcon />} />
              <Tab
                label="Participants"
                value="3"
                icon={<AccessibilityIcon />}
              />
              <Tab label="Statistics" value="4" icon={<EqualizerIcon />} />
              <Tab label="Alerts" value="5" icon={<ReportProblemIcon />} />
              <Tab label="Health Care" value="6" icon={<FavoriteIcon />} />
              <Tab label="Plans" value="7" icon={<ListAltIcon />} />
              <Tab
                label="Benchmark"
                value="8"
                icon={<ListAltIcon />}
              />
              <Tab
                label="Heatmap"
                value="9"
                icon={<ListAltIcon />}
              />
              <Tab
                label="Diagnostic" …

我在我的 React 项目中使用材料表。我有 3 层数据树。这是第一个：

当我单击数据树表中第一层的 2 个项目中的第一个时，是否可以对其进行着色，以便更容易看到其下的值是子元素。像这样：

另外，如果我在向它传递数据时可以给它着色，我会更高兴。这是我传递数据的方式：

data={[
        {
          id: 1, // MAIN ELEMENT 
          name: "Parent",
          value: `Parent`,
        },
        {
          id: 2, //CHILD OF THE MAIN ELEMENT
          name: "Child",
          value: `Child`,
          parentId: 1,
        }]}

是否有一个选项可以在打开父元素之前对其进行着色，这样就可以清楚地看出它是父元素，而其他元素是子元素？

更新：

这是codesandbox 示例。正如您所看到的，当您打开 Parent1 时，Parent2 似乎位于 Parent1 下。我想澄清的是它不在它下面。

https://codesandbox.io/s/jolly-germain-6fncr?file=/src/App.js