如何在 React JS 的 foreach 循環內顯示 if 語句的值？

Question

您好，我正在使用 React JS，在這里非常感謝任何意見和建議。 sharedfields forEach 循環執行 console.log sharedFieldAlias 值，如果我在循環之外進行 console.log，它不會是 output 值。 我需要在 span 標記中顯示 sharedFieldAlias 值，但它給出了一個引用錯誤，指出未定義 sharedFieldAlias。 如何顯示 span 標簽中的值？

sharedfields.forEach((sharedField) => {
        let sharedFieldAlias = sharedField.alias;
        if(value.shared_field_uuid == sharedField.uuid) {
          console.log(sharedFieldAlias);
        }
      });
      
      const fullLabel = (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <InputLabel label={display_name} help={parameter.help?.header_id} />
          {!isLinked ? (
            <LinkOutlined onClick={linkField} style={{ color: blue.primary }} />
          ) : (
            <div>
              <CloseSquareOutlined
                onClick={unlinkField}
                style={{ color: yellow[7] }}
              />
              <span className="ant-typography ant-typography-secondary" id="sharedFieldAlias" style={{ marginLeft: '5px', color: '#262626'}}>
                {sharedFieldAlias}
              </span>
            </div>
          )}
        </div>
      );

Answer 1

在循環外聲明變量sharedFieldAlias （在你的例子中就在循環之上）。

let sharedFieldAlias;
<your loop goes here>

Answer 2

您必須在循環外聲明變量。 使用 for 循環而不是 forEach 也可能會有所幫助，這樣您就可以在找到值后跳出循環。

 let sharedFieldAlias; for (const sharedField of sharedfields) { if (value.shared_field_uuid == sharedField.uuid) { sharedFieldAlias = sharedField.alias; console.log(sharedFieldAlias); break; } }

Answer 3

不需要全局變量。 使用find檢查數組，找到 uuid 匹配的 object，並返回別名，否則返回 'None'。

 const sharedFields = [ { alias: 'Bob', uuid: '1' }, { alias: 'Carol', uuid: '2' }, { alias: 'Sam', uuid: '3' }, { alias: 'Moses', uuid: '4' } ]; function getAlias(fields, uuid) { const found = fields.find(field => { return uuid === field.uuid; }); return found? found.alias: 'None'; } console.log(getAlias(sharedFields, '3')); console.log(getAlias(sharedFields, '31')); console.log(getAlias(sharedFields, '2'));

這是 React 中的一個小的工作示例。

 function getAlias(fields, uuid) { const found = fields.find(field => { return uuid === field.uuid; }); return found? found.alias: 'None'; } function Example({ data }) { return ( <div> <div>{getAlias(data, '3')}</div> <div>{getAlias(data, '31')}</div> <div>{getAlias(data, '2')}</div> </div> ); } const data = [ { alias: 'Bob', uuid: '1' }, { alias: 'Carol', uuid: '2' }, { alias: 'Sam', uuid: '3' }, { alias: 'Moses', uuid: '4' } ]; ReactDOM.render( <Example data={data} />, document.getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>