Как передать функцию как начальное значение объекта внутри useState ()? - PullRequest
Новая
       2

Как передать функцию как начальное значение объекта внутри useState ()?

0 голосов
/ 08 мая 2020

Я пытаюсь перенести устаревшую кодовую базу с классовой на функциональную с использованием хуков.

Унаследованный код был примерно таким: 

constructor(props){
    super(props)
    this.state = {
        pickerProps: {
            onPickDate: this.onPickDate,
            activeColor: "#119955",
            date: "12-12-2012"
        },
        inputStyle: "",
        selectedDate: null
    }
}

onPickDate = date => {
    this.setState((state) => ({
        selectedDate: date
    }))
}

onInputChange = (prop, value) => {
    this.setState((state) => ({ 
        pickerProps: {
            ...state.pickerProps,
            [prop]: value
        }
     }))
} 

changeInputStyle = e => {
    const value = e.target.value
    this.setState((state) => ({inputStyle: value}))
}

, а новый код: 

const [inputStyle, setInputStyle] = useState("");
  const [selectedDate, setSelectedDate] = useState(null);
  const [pickerProps, setPickerProps] = useState({
    onPickDate:onPickDate, // How to pass function here
    activeColor: "#119955",
    date: "12-12-2012",
  });

  // This is the function I want to pass to useState()
  const onPickDate = (date) => {
    setSelectedDate(date);
  };

  const onInputChange = (prop, value) => {
    setPickerProps({ [prop]: value });
  };

  const changeInputStyle = (e) => {
    const value = e.target.value;
    setInputStyle(value);
  };

Я получаю предупреждение: The onPickDate was used before defined

Также, когда я отправляю pickerProps на DatePicker: 

 <div className="date-picker">
            <DatePicker {...pickerProps} />
          </div>

, возникает ошибка: 

OnPickDate is not defined ()

1 Ответ

1 голос
/ 08 мая 2020

Проблема здесь связана с подъемом функции. Объявленная вами функция имеет тип const, и такие переменные с объявлением const или let не поднимаются.

Если вы объявите функцию с помощью function definition, она будет работать без необходимости писать ее выше useState 

const [inputStyle, setInputStyle] = useState("");
  const [selectedDate, setSelectedDate] = useState(null);
  const [pickerProps, setPickerProps] = useState({
    onPickDate:onPickDate, // How to pass function here
    activeColor: "#119955",
    date: "12-12-2012",
  });

  function onPickDate(date) {
    setSelectedDate(date);
  };

  const onInputChange = (prop, value) => {
    setPickerProps({ [prop]: value });
  };

  const changeInputStyle = (e) => {
    const value = e.target.value;
    setInputStyle(value);
  };

Однако вам нужно хранить функции в состоянии, так как это затруднит обновление состояния, вы можете напрямую передавать их в качестве свойств дочерним элементам 

const [inputStyle, setInputStyle] = useState("");
  const [selectedDate, setSelectedDate] = useState(null);
  const [pickerProps, setPickerProps] = useState({
    activeColor: "#119955",
    date: "12-12-2012",
  });

  // This is the function I want to pass to useState()
  const onPickDate = (date) => {
    setSelectedDate(date);
  };

  const onInputChange = (prop, value) => {
    setPickerProps({ [prop]: value });
  };

  const changeInputStyle = (e) => {
    const value = e.target.value;
    setInputStyle(value);
  };

  return (
       <div className="date-picker"> 
            <DatePicker {...pickerProps} onPickDate ={onPickDate}/>
          </div>
  }
...