Question

我的组件看起来像这样：

constMyComponent = props => {
    const [events, setEvents] = useState();
    useEffect(() => {
       getData(id).then(function(myEvents){
           setEvents(myEvents);
       });
   }, [id]);

当我渲染变量“ events”时，由于问号运算符，它看起来不错：

<ul>
{ events && Object.keys(events.events).map( (data, i) => (
        <li key = { i }>
           <span>
              { events.events[data].mykey}
           </span>
        </li>
        ))}
     </ul>

但是，在“ useEffect”中，我需要对检索到的数据应用一些逻辑。在行后

setEvents(myEvents);

我无法访问变量“事件”。我想还没有准备好。我读了一些有关回调的内容。那是路要走吗？仅添加“ .then”将不起作用。在这种情况下，通常如何访问数据？

Answer 1

如果我正确理解了您的问题，您想根据旧的events合理地制作新的events并想访问它，

U可以这样访问它，

setEvents(prevEvents => {

  // some logical computations

  return theNewEvents
});

在此示例中，

function Counter({initialCount}) {
 const [count, setCount] = useState(initialCount);
 return (
   <>
     Count: {count}
     <button onClick={() => setCount(initialCount)}>Reset</button>
     <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
     <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
   </>
 );
}

来自React Docs

但是，如果您想对新的events进行逻辑更改，您可以在设置状态之前轻松地在函数中完成此操作（如@jonrsharpe指出的那样）

constMyComponent = props => {
    const [events, setEvents] = useState();
    useEffect(() => {
       getData(id).then(function(myEvents){
           // make ur changes to `myEvents`
           ...
           // then, set it to state
           setEvents(myEvents);
       });
   }, [id]);

如何在useState中使用回调

1 个答案: