Reactjs 为什么我的子React组件需要包装在函数中以检测父状态更改？

这是我的工作代码，下面是我希望代码看起来像但不起作用的代码：

我希望MainComponent的selectDay方法更改TableComponent的URL，以便根据选择的日期获取数据

class MainComponent extends React.Component{

constructor(props) {
    super(props);
    this.state = {
        urls: [{
            appointmentsUrl: "/api/appointments",
            callsUrl: "/api/calls"
        }]
    }
}

selectDay(day) {
    if(day.key == 1) {
        this.setState({
            urls: [{
                appointmentsUrl: "/api/appointments",
                callsUrl: "/api/calls"
            }]
        })
    } else {
        this.setState({
            urls: [{
                appointmentsUrl: "/api/appointments2",
                callsUrl: "/api/calls2"
            }]
        })
    }
}

    render() {
    var calendarData = [//init some array of dates];


    return (
        <div>
            <TopMenuComponent/>
            <div className="contentContainer">
                {
                    ((urls)=>{
                        return(
                            <TableComponent key={urls[0].appointmentsUrl} appointmentsUrl={urls[0].appointmentsUrl} callsUrl={urls[0].callsUrl}/>
                        )
                    })(this.state.urls)
                }
            </div>
        </div>
    )
}

class MainComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
网址：[{
任命SURL:“/api/Appoints”，
callsUrl:“/api/calls”
}]
}
}
选择日期（天）{
如果（day.key==1）{
这是我的国家({
网址：[{
任命SURL:“/api/Appoints”，
callsUrl:“/api/calls”
}]
})
}否则{
这是我的国家({
网址：[{
任命SURL:“/api/appointments2”，
callsUrl:“/api/calls2”
}]
})
}
}
render（）{
var calendarData=[//初始化一些日期数组]；
返回(
{
（（URL）=>{
返回(
)
})（this.state.url）
}
)
}

这是可行的，但我想要的是：

<TableComponent appointmentsUrl={this.state.appointmentsUrl} callsUrl={this.state.callsUrl}/>

并将状态初始化为：

this.state={appointmentsUrl:“/api/appointments”，
callsUrl:“/api/calls”}

如果您的状态在问题中表示的结构中，并且希望使用该数组中的第一个对象（假设您启用了解构语法）：

function render（）{
const[firstUrlObj]=this.state.url
返回(
)
}

如果要渲染整个阵列，请执行以下操作：

function render() {
  const urls = this.state.urls
  return (
    <div>
      <TopMenuComponent/>
      <div className="contentContainer">
        { urls.map(urlObj => <TableComponent appointmentsUrl={urlObj.appointmentsUrl} callsUrl={urlObj.callsUrl}/>) }
      </div>
    </div>
  )
}

function render（）{
const url=this.state.url
返回(
{url.map（urlObj=>）}
)
}

---

如果数组中只有一个对象，而您不打算拥有更多，我建议您看看另一个答案。

为什么要写这个？状态是一个对象，您将如何以这种方式访问？您是对的，让我重新措辞。

function render() {
  const urls = this.state.urls
  return (
    <div>
      <TopMenuComponent/>
      <div className="contentContainer">
        { urls.map(urlObj => <TableComponent appointmentsUrl={urlObj.appointmentsUrl} callsUrl={urlObj.callsUrl}/>) }
      </div>
    </div>
  )
}