Javascript 功能组件中的新道具不会重新渲染

我目前在我的功能组件上有一个问题，当它收到新道具时不会更新。我想澄清我的心智模型，在查看react网站上的内容后，如果组件保存在状态中，新的道具应该更新组件，对吗

考虑以下代码：

const defaultStart = dayjs().startOf("month").format("YYYY-MM-DD");
const defaultEnd = dayjs().endOf("month").format("YYYY-MM-DD");

function IncidentList({
  incidentsList,
  requestIncidents,
  selectedLoc,
  selectedLoc,
  startDate = defaultStart,
  endDate = defaultEnd,
}) {
  const [selectedEndDate, handleEndDateChange] = useState(endDate);
  const [selectedStartDate, handleStartDateChange] = useState(startDate);

  useEffect(() => {
  ┊ const payload = {
  ┊ ┊ location: selectedLoc,
  ┊ ┊ start_date: dayjs(selectedStartDate).format("YYYY-MM-DD"),
  ┊ ┊ end_date: dayjs(selectedEndDate).format("YYYY-MM-DD"),
  ┊ };
  ┊ requestIncidents(payload);
  }, [requestIncidents, selectedEndDate, selectedStartDate]);

   return (
   ┊ <div className="container sm:p-8 md:p-16">
   ┊ ┊ <MaterialTable
   ┊ ┊ ┊ columns={columns}
   ┊ ┊ ┊ data={incidentsList}
   ┊ ┊ ┊ title="Incident list"
   ┊ ┊ ┊ actions={actions}
   ┊ ┊ ┊ options={{
   ┊ ┊ ┊ ┊ pageSize: 20,
   ┊ ┊ ┊ }} 
 ┊ ┊ ┊ components={{
 ┊ ┊ ┊ ┊ Toolbar: (props) => (
 ┊ ┊ ┊ ┊ ┊ <div className="p-8">
 ┊ ┊ ┊ ┊ ┊ ┊ <MTableToolbar {...props} />
 ┊ ┊ ┊ ┊ ┊ ┊ <div className="ml-8 p-8 border-1 w-1/2">
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ <div className="flex flex-row">
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ <p className="text-lg font-semibold">Filter Using:</p>
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ </div>
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ <div className="flex flex-row -mx-4">
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ <div className="px-8">
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ <DatePicker
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ format="YYYY-MM-DD"
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ label="Minimum Date"
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ inputVariant="outlined"
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ minDate={new Date("2015-01-01")}
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ maxDate={dayjs().format()}
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ value={selectedStartDate}
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ onChange={handleStartDateChange}
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ />
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ </div>
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ <div className="px-8">
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ <DatePicker
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ format="YYYY-MM-DD"
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ label="Maximum Date"
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ inputVariant="outlined"
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ minDate={selectedStartDate}
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ maxDate={dayjs().format()}
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ value={selectedEndDate}
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ onChange={handleEndDateChange}
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ />
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ </div>
 ┊ ┊ ┊ ┊ ┊ ┊ ┊ </div>
 ┊ ┊ ┊ ┊ ┊ ┊ </div>
 ┊ ┊ ┊ ┊ ┊ </div>
 ┊ ┊ ┊ ┊ ),
 ┊ ┊ ┊ }} />

const mapStateToProps = (state) => ({
  incidentsList: state.incident.incidents,
  selectedLoc: state.loc.selectedLoc,
});

IncidentList.propTypes = {
  incidentsList: PropTypes.arrayOf(PropTypes.object),
  requestIncidents: PropTypes.func,
  selectedLoc: PropTypes.number,
  endDate: PropTypes.string,
  startDate: PropTypes.string,
};

---

您需要从父级状态传递道具

例如：

从“React”导入React；
从“/IncidentList”导入IncidentList；
const IncidentListContainer=（）=>{
const[startDate，setStartDate]=React.useState（新日期）；
const[endDate，setEndDate]=React.useState（新日期）；
setStartDate（newDate）；//这将更新子对象
返回(
);
}

相比之下，以下各项将不起作用：

const startDate=新日期；
const endDate=新日期；
changeDatesLater（开始日期、结束日期）；//这行不通
const IncidentListContainer=（）=>{
返回(
);
}

意外事件列表

将在其道具更新后重新呈现

但是，您似乎没有使用

startDate

和

endDate

。相反，您只需设置

selectedStartDate

和

selectedEndDate

的初始值，这不是重新渲染的一部分，因此

selectedStartDate

和

selectedEndDate

更新时不会更新

---

尝试直接使用

startDate

和

endDate

，除非您有一些逻辑（

if（startDate&&endDate）

？），在这种情况下，您需要添加状态对象。

useffect将在[]中的变量像legacy

组件一样工作时运行，问题是，在我提供了新道具作为默认状态@moficodesorry时，为什么不重新渲染呢？我在组件中实际使用了它，在组件中使用了
selectedStartDate
和
selectededaddate
。但是它不会更新。。。我应该直接使用道具吗？是的，随他们来就用。useState用于创建本地状态对象以及更新该对象的函数。如果您需要在组件中的任何位置使用道具，您可以直接使用它。当它更新时，组件将更新。如果你在useEffect中使用它，useEffect将运行（假设你将道具添加到依赖项数组中）是的，你是对的，如果我直接使用道具，它将重新渲染。我猜useState只是作为构造函数调用的。。。

  useEffect(() => {
  ┊ if (startDate && endDate) {
  ┊ ┊ handleEndDateChange(endDate);
  ┊ ┊ handleStartDateChange(startDate);
  ┊ }
  }, [startDate, endDate]);