刷新网站后使用效果停止工作

Question

我在Reactjs工作。我的表格被认为是另一种形式的配置。这种表格形式的外观是这样的：

  const [startingDate, setStartingDate] = useState();
  const [endingDate, setEndingDate] = useState();
  const [startingTime, setStartingTime] = useState();
  const [endingTime, setEndingTime] = useState();
  const [places, setPlaces] = useState();

  const createConfig = () => {
    Axios.post("http://localhost:3005/adminConfig", {
      startingDate,
      endingDate,
      startingTime,
      endingTime,
      places,
      organization: user._id,
    }).then((response) => {
      alert("successful")
    })
  }

将数据发送到服务器后，我应该检索并将其设置为另一种形式的配置（第二个表单应该由其他人共享和填写）方法：

const [config, setConfig] = useState([]);

  useEffect(() => {
    Axios.get(`http://localhost:3005/adminConfig/`).then((response) => {
      setConfig(response.data);
    });
  }, []);

          <input
            type="date"
            placeholder="Date of the meeting
            name="date"
            id="datePickerId"
            min={config[0].startingDate}
            max={config[0].endingDate}
            onChange={(event) => {
              setDate(event.target.value);
            }}
            required
          />

当您访问此表单时，尚未设置React中的配置时，效果很好。访问它并启动配置后，您可以查看其更新的方式；日期是有限的，从理论上讲，一切都很好，当您刷新网站或其他人试图访问时，问题出现，它停止工作，您必须删除设置（config [0] .startingdate等）

控制台显示：

< Strong>无法阅读未定义的属性（阅读“起点”）

任何帮助都将不胜感激

Answer 1

加载页面后，执行使用效果挂钩。在初始页面加载时，config [0]尚未定义。

使用可选的链接和默认值togther：

<input
    type="date"
    placeholder="Date of the meeting"
    name="date"
    id="datePickerId"
    min={config[0]?.startingDate || 0} // <==  
    max={config[0]?.endingDate || 0} // <==
    onChange={(event) => {
        setDate(event.target.value);
    }}
    required
/>

Answer 2

如果可能的话，您可以使用后备值：

min={ config?.length > 0 ? config[0].startingDate : '1980-01-17'}

有些人没有admin配置，为什么您遇到错误的原因：还可以：

Axios.get(`http://localhost:3005/adminConfig/`).then((response) => 
{
  setConfig(response.data); 
});

Answer 3

尝试使Axios请求async也可以返回空数组。

Answer 4

您可以使用可选的链接来实现所需的行为，可选的链式操作员（？）使您可以读取位于连接对象链深处的属性的值，而无需检查链中的每个引用是否有效。

<input
        type="date"
        placeholder="Date of the meeting
        name="date"
        id="datePickerId"
        min={config[0]?.startingDate} //change this
        max={config[0]?.endingDate} //change this
        onChange={(event) => {
          setDate(event.target.value);
        }}
        required
      />