Question

每次按下按钮时，我都会添加一个数组。该部分似乎起作用。当我将其输出到控制台时，可以看到每个控制台都已添加。

  const addToPool = () => {
    diePool[poolCount] = (
      <die
        type={diceType}
        number={diceNumber}
        adjuster={diceAdjuster}
      />
    );
    poolCount++;
  };

如何遍历表单后在html表中显示？

return (
    <div className="App">
      <header className="App-header">
        <Form>
            <Button onClick={addToPool} aria-controls="diceRoll" aria-expanded={open} variant="secondary" size="sm">
              Add to Pool
            </Button>
          </ButtonToolbar>

        </Form>
        <Fade in={open}>
          <div id="diceRoll">
            The result is: {randNum}
          </div>
        </Fade>
      </header>
      <Table responsive>
      <caption>Dice Pool</caption>
      <thead>
        <tr>
          <th>Type</th>
          <th>Number</th>
          <th>Adjuster</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </Table>
    </div>
  );
}

export default App;

Answer 1

在body标记内，您可以使用map方法（https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map）遍历数组

<tbody>
  {dice.map((item,index) => { 
    return(
      <tr key={index}>
        <td>{item.key1}</td>
      etc...
      </tr>
   )})}
</tbody>

Answer 2

为了让React更新用户界面以反映更改，它希望您通知它已进行了更改。您可以通过修改组件的 state 来执行此操作。在您的addToPool方法中，您正在修改一个名为diePool的局部变量。那只是控制对象的成员变量，而不是状态，而且React不会知道您进行了更改。

相反，请使用以下方式修改状态：

const addToPool(diceType, diceNumber, diceAdjuster) {
  this.setState(prevstate => { 
    return {
      diePool: prevstate.diePool.push(
        { type: diceType, number: diceNumber, adjuster: diceAdjuster }
      )
    } 
  });
}

要使其正常工作，您的组件将必须具有初始状态才能使用。您可以在构造函数中创建它：

constructor(props) {
  this.state = { diePool: [] };
}

现在，每当您的代码调用addToPool时，状态就会被更新，并且通过setState，React将知道它，并根据需要调用render方法。

在您的render方法中，您将需要查询状态以将掷骰子放入您的桌子。您可以在骰子阵列上使用map来做到这一点：

<Table responsive>
  // ...snip...
  <tbody>
    {this.state.diePool.map((roll, index) => {
      <tr key={index}>
        <td>{roll.type}</td>
        <td>{roll.number}</td>
        <td>{roll.adjuster}</td>
      </tr>
    })}
  </tbody>
</Table>

（请注意这里使用index来确保每个表行都有唯一的索引-这是React能够在可能的情况下单独更新表行的要求。）

在这里重要的是组件 state 是React中的关键概念。如果您修改了某些内容，并且希望React对它做出反应（ha！），则必须通过setState来修改状态（而不是直接修改this.state）。这是React知道的唯一方法。然后，React将发挥其魔力，并在必要时调用组件及其子组件的render方法。

Answer 3

我弄清楚了，并在其他人遇到麻烦时将其张贴在这里：

宣布了一个柜台：

const [poolCount, setPoolCount] = useState(0);

创建了我的addToPool：

  const addToPool = () => {
    setDiePool([
      ...diePool,
      {
        dp1 : poolCount,
        dp2 : diceType,
        dp3 : diceNumber,
        dp4 : diceAdjuster
      }
    ]);

    setPoolCount(poolCount+1);
  };

当我点击按钮时，调用我的addToPool：

    <Button onClick={addToPool} aria-controls="diceRoll" aria-expanded={open} variant="secondary" size="sm">
    Add to Pool
    </Button>

然后创建我的表并循环：

    <Table responsive>
      <caption>Dice Pool</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>Type</th>
          <th>Number</th>
          <th>Adjuster</th>
        </tr>
      </thead>
      <tbody>
         {diePool.map(die => (<tr key={die.dp1}><td>{die.dp1}</td><td>{die.dp2}</td><td>{die.dp3}</td><td>{die.dp4}</td></tr>))}
      </tbody>
    </Table>

在React Bootstrap中，我如何在html表中显示数组的内容

3 个答案: