我該怎么做才能在 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>
    )  
  }