在反應中添加和刪除組件的按鈕

Question

我試圖添加新按鈕來添加新標簽，我正在使用react-tabs來構建這樣的標簽

<Tabs>
  <TabList>
    <Tab>Title 1</Tab>
    <Tab>Title 2</Tab>
  </TabList>
  <TabPanel>
    <h2>Any content 1</h2>
  </TabPanel>
  <TabPanel>
    <h2>Any content 2</h2>
  </TabPanel>
</Tabs>

所以我需要兩個循環，一個用於標簽，另一個循環用於這樣的標簽面板

<Fragment>
  <Tabs>
    <TabList>
      {stats.map(({ figure = "", instructions = "" }, i) => {
        <Tab>
          <RichText
            tagName="h2"
            placeholder={__("Write Recipe title…")}
            value={figure}
            onChange={value => updateStatProp(i, "figure", value[0])}
          />
        </Tab>;
      })}
    </TabList>
    {stats.map(({ figure = "", instructions = "" }, i) => {
      <TabPanel>
        <RichText
          tagName="div"
          multiline="p"
          className="steps"
          placeholder={__("Write the instructions…")}
          value={instructions}
          onChange={value => updateStatProp(i, "instructions", value[0])}
        />
        <Button
          isLarge={true}
          onClick={() => {
            const newStats = _cloneDeep(stats);
            newStats.splice(i, 1);
            setAttributes({ stats: newStats });
          }}
        >
          <Dashicon icon="no-alt" />
        </Button>
      </TabPanel>;
    })}
  </Tabs>
  <div style={{ textAlign: "center", padding: "8px 0" }}>
    {stats.length < 5 && (
      <Button
        isLarge={true}
        onClick={() => {
          const newStats = _cloneDeep(stats);
          newStats.push({ figure: "", instructions: "" });
          setAttributes({ stats: newStats });
        }}
      >
        Add new stat
      </Button>
    )}
  </div>
</Fragment>

狀態是統計信息。 stats數組中的每個項目看起來都像這樣{圖：'100k'，指令：'humans'}按鈕“添加新的統計信息”僅將新的stat對象附加到此數組並調用setAttributes。 刪除按鈕只是刪除該索引處的項目。

它沒有任何錯誤，但是當我單擊“添加新統計信息”按鈕時沒有添加任何標簽

Answer 1

您沒有從給map的函數返回任何內容。 返回它，或者將函數體（ {} ）更改為parens（ () ）以使返回隱式：

<Fragment>
  <Tabs>
    <TabList>
      {stats.map(({ figure = "", instructions = "" }, i) => { // return statement
        return <Tab>
          <RichText
            tagName="h2"
            placeholder={__("Write Recipe title…")}
            value={figure}
            onChange={value => updateStatProp(i, "figure", value[0])}
          />
        </Tab>;
      })}
    </TabList>
    {stats.map(({ figure = "", instructions = "" }, i) => ( // implicit return
      <TabPanel>
        <RichText
          tagName="div"
          multiline="p"
          className="steps"
          placeholder={__("Write the instructions…")}
          value={instructions}
          onChange={value => updateStatProp(i, "instructions", value[0])}
        />
        <Button
          isLarge={true}
          onClick={() => {
            const newStats = _cloneDeep(stats);
            newStats.splice(i, 1);
            setAttributes({ stats: newStats });
          }}
        >
          <Dashicon icon="no-alt" />
        </Button>
      </TabPanel>;
    ))}
  </Tabs>
  <div style={{ textAlign: "center", padding: "8px 0" }}>
    {stats.length < 5 && (
      <Button
        isLarge={true}
        onClick={() => {
          const newStats = _cloneDeep(stats);
          newStats.push({ figure: "", instructions: "" });
          setAttributes({ stats: newStats });
        }}
      >
        Add new stat
      </Button>
    )}
  </div>
</Fragment>