我该怎么做才能在 React 组件的渲染方法中将 prop 仅应用于地图/数组中的一项？

Question

我试图根据道具仅对数组中的一项进行更改。 我有这个清单：

interface FieldProps {
  fileLimitWarning?: // I STILL NEED TO FIGURE THIS OUT
}

const DataField = (props: FieldProps) => {
 const { fileLimitWarning, handleFileSelection } = props;

 return (
   <>
     {fileLimitWarning && <p>This file exceeds the max size of 250mb</p>}
     <input onChange={e => handleFileSelection(e.target.files)} />
   </>
}

const ContainerOfDataField = () => {
 const [fileLimitWarning, setFileLimitWarning] = useState(false);

 const handleFileSelection = (files) => {
    setFileLimitWarning(false);
    const [currentFile] = files;

    if(currentFile?.size <= 250000000) {
      setFileLimitWarning(true);
    }
 }

 return (
      <ul>
        {
          fields?.map((promoField: Field, index: number) => {
            return (
              <DataField
                key={index}
                fileLimitWarning={fileLimitWarning}
                handleFileSelection={handleFileSelection}
              />
            );
          })
        }
      </ul>
 )  
}

在这种情况下，我想要的是仅在DataField组件对应时返回 null。 现在，每当ContainerOfDataField组件上的fileLimitWarning === true时，它就会隐藏/删除/删除DataField组件中的所有Typography节点。 所以我需要的是只隐藏与问题出处匹配的索引。

清楚吗？

Answer 1

我认为理想情况下，您会在地图的每次迭代中定义fileLimitWarning ，因为（我假设）它是当前项目的属性，而不是全局属性：

  return (
      <ul>
        {
          fields?.map((promoField: Field, index: number) => {
            // { currentFile } = promoField???
            return (
              <DataField
                key={index}
                fileLimitWarning={currentFile?.size <= 250000000}
                handleFileSelection={handleFileSelection}
              />
            );
          })
        }
      </ul>
    )  
  }