使用 map 不會呈現任何 JSX 內容反應

Question

我有一個問題，我試圖從數據列表中生成動態復選框元素，但屏幕上沒有出現任何復選框，但控制台中沒有可見的錯誤。 我正在遵循我在不同組件中使用的模式來呈現 jsx，所以我必須有一個錯字，但我很難過。

主要組件 SearchPage.js：

  const renderSettingsView = (data) => {
    if (settingsViewVisible) {
      return (
        <SettingsView data={data} />
      )
    } else {
      return null;
    }
  }

  const toggleSettingsView = () => {
    setSettingsViewVisible(!settingsViewVisible);
  }

  const toggleMainInfo = (e) => {
    // setShowMainInfo(!showMainInfo);
    setShowMainInfo(e.target.checked, () => {
      alert(showMainInfo)
    })
  }

  const SETTINGS_DATA = [
    {
      label: 'Main info',
      id: 'main_info',
      callback: toggleMainInfo
    }
  ]


  return (
    <div className="ui container" style={{marginTop: '10px'}}>
      <SearchBar term={term} onTermUpdate={onTermUpdate} />
      {renderRecentSearches()}
      <br/><br/>
      <button onClick={toggleSettingsView}>Settings</button>
      {renderSettingsView(SETTINGS_DATA)}
      <div className="ui segment">
        {renderMainContent()}
      </div>
    </div>
  )

包括注釋掉的兩種嘗試都沒有在屏幕 SettingsView.js 上顯示任何復選框：

import React from 'react';

import SettingsCheckbox from './SettingsCheckbox';



const SettingsView = ({data}) => {

  // const renderCheckboxes = () => {
  //   return data.map((checkbox_info) => {
  //     <SettingsCheckbox id="main_info" label="Main info" callback={checkbox_info.callback}/>
  //   });
  // }

  const checkboxes = data.map((checkbox_info) => {
      <SettingsCheckbox id="main_info" label="Main info" callback={checkbox_info.callback}/>
    });

  return (
    <div className="ui segment">
    settings
      {checkboxes}
    </div>
  );
}


export default SettingsView;

SettingsCheckbox.js：

import React from 'react';


const SettingsCheckbox = ({id, label, callback}) => {

  return (
    <div style={{width: '200px'}}>
      <input
        type="checkbox"
        id={id}
        name={id}
        value={id}
        onChange={callback()}  />
      <label for="main_info">{label}</label><br/>
    </div>
  );
}


export default SettingsCheckbox;

如何在對象的數據列表上 map 並根據數據呈現復選框？

Answer 1

我已經嘗試了您的 SettingsView.js 代碼片段，但發現了一個小問題。 您需要執行如下所示的隱式返回。

嘗試使用此代碼，

const checkboxes = data.map((checkbox_info) => (
    <SettingsCheckbox id="main_info" label="Main info" 
    callback= {checkbox_info.callback}/>
));
    
return (
    <div className="ui segment">
        settings
        {checkboxes}
    </div>
);

請注意，我已將data.map((checkbox_info) => {<SettingsCheckbox />})更改為data.map((checkbox_info) => (<SettingsCheckbox />))並使用()而不是{}

但是，如果您更喜歡顯式方式，請嘗試使用如下的 return 語句。

const checkboxes = data.map((checkbox_info) => {
    return (
        <SettingsCheckbox id="main_info" label="Main info" 
        callback= {checkbox_info.callback}/>
    )
});

return (
    <div className="ui segment">
        settings
        {checkboxes}
    </div>
);

兩種方式都很好用...