React Hooks：无法将 state 从子组件发送到父组件

Question

我有一个<Day/>组件，它在一天中呈现一个充满时间的表格。

现在我在<TableLayout/>中有一个 handleChange function ，它正在监听文本区域的变化。

function TableLayout({ sendEventTargetToParent }) {
  var [amountOfRows, setAmountOfRows] = useState(24);
  var [textValue, setTextValue] = useState('');
  var [eventName, setEventName] = useState('');

 useEffect(() => {
   sendDataToParent();
 }, [eventName, textValue]);

  function sendDataToParent() {
    sendEventTargetToParent(eventName, textValue);
  }

  function handleChange(event) {
    var { name, value } = event.target;
    setEventName(name);
    setTextValue(value);
  }

标记：

  <TextArea
   rows={2}
   name="textarea"
   value={textValue}
   onChange={(e) => handleChange(e)}
   placeholder="Tell us more"
  />

我想将该信息从文本区域发送到组件，您可能已经注意到道具TableLayout正在消耗：

 function TableLayout({ sendEventTargetToParent }) {

我认为属于 useEffect 因为它会产生副作用：

useEffect(() => {
  sendDataToParent();
}, [eventName, textValue]);

function sendDataToParent() {
  sendEventTargetToParent(eventName, textValue);
}

无论如何，这个想法是当TableLayout中的那些局部变量/状态发生变化时，它会被踢到Day ...

export default function Day({ dayInfo }) {
  var [dayInfoInChild, setDayInfoInChild] = useState({});
  var [currentDate, setCurrentDate] = useState('');
  var [timeOfDay, setTimeOfDay] = useState('');
  var [eventNameFromChild, setEventNameFromChild] = useState('');
  var [textValueFromChild, setTextValueFromChild] = useState('');

  function getEventTargetFromChild(eventName, textValue) {
    setEventNameFromChild(eventName);
    setTextValueFromChild(textValue);
  }

    useEffect(() => {
      if (dayInfo !== null) {
        var modifiedDayInfo = dayInfo
         .split(' ')
         .map((item) => {
           if (item.indexOf(',')) return item.replace(/,/g, '');
        })
         .join('-');

         setCurrentDate(modifiedDayInfo);

         if (localStorage.getItem(modifiedDayInfo)) {
           var stringVersionOfModifiedDayInfo = modifiedDayInfo;

           modifiedDayInfo = JSON.parse(localStorage.getItem(modifiedDayInfo));

         if (!dayInfoInChild.hasOwnProperty(stringVersionOfModifiedDayInfo)) {
          setDayInfoInChild({
            ...dayInfoInChild,
            [stringVersionOfModifiedDayInfo]: modifiedDayInfo,
          });
        }

      } else {
        localStorage.setItem(modifiedDayInfo, JSON.stringify({}));
      }
        if (dayInfoInChild.hasOwnProperty(currentDate)) {
          setDayInfoInChild({
            ...dayInfoInChild,
            [currentDate]: {
              [eventNameFromChild]: textValueFromChild,
            },
          });
        }
      }
    }, []);

And the code in the Day's useEffect essentially creates an JSON object in localstorage with its key based on the date if needed if not it pulls that key and object converts it to a JS object and puts it into the state using useState`.

  var [eventNameFromChild, setEventNameFromChild] = useState('');
  var [textValueFromChild, setTextValueFromChild] = useState('');

  function getEventTargetFromChild(eventName, textValue) {
    setEventNameFromChild(eventName);
    setTextValueFromChild(textValue);
  }

这是来自 Child 的 state 在 Day 中设置的部分。

   if (dayInfoInChild.hasOwnProperty(currentDate)) {
     setDayInfoInChild({
       ...dayInfoInChild,
         [currentDate]: {
           [eventNameFromChild]: textValueFromChild,
         },
     });
  }

但是现在我可以在 object 中添加一个按键，然后 UI 锁定：

那么如何使用钩子创建从子级到父级的有凝聚力的流程？

Answer 1

通过了解您的问题，我建议您使用useContext

这是一个可以帮助您解决此问题的链接。

https://vimalselvam.com/post/react-hooks-lift-up-pass-down-state-using-usecontext-and-usereducer/