對象在日期道具上作為 React 子項無效

Question

我是新手，很難找到解決方案。 我想在我的 class 可用性的 class 模態組件上顯示我的道具，但出現上述錯誤。

當我驗證時，帶有日期的道具會顯示在我的控制台日志中，但無法將該道具傳遞到我的 div 中。

可用性.js

validation = () => {

    if (this.state.showDate) {
      this.setState({
        showDate: true,
        showModal: true
      });
    } else {
      alert('Please enter a valid date')
    }
  };

render

{this.state.showDate
                &&
                <p>
                  From : {this.state.date[0].toLocaleDateString()} to :{' '}
                  {this.state.date[1].toLocaleDateString()}
                </p>
              }

<button className={'button'} onClick={this.validation}>Validate</button>

{this.state.showModal && <Modal dateModal={this.state.date} toggle={this.togglePop} />}

此時，我的日期顯示在我的可用性組件上，並且一旦驗證，我也將它作為道具放在我的 Modal 上，但隨后，我收到了這條指令的錯誤。

模態.js

<div>
your dates :{this.props.dateModal}
</div>

我希望我足夠明確。

謝謝

Answer 1

我從您的代碼中了解到this.state.date是一個數組。 所以你不能在 react 標簽中調用數組，所以your dates:{this.props.dateModal}行不能在<div>標簽中。

您可以嘗試使用map在div標簽中顯示日期數組中的項目