Javascript 使用useState将concat当前状态（数组）与另一个数组进行反应

我的组件中的初始状态是一个对象数组。我正在使用Redux获取另一个对象数组，正如您在下面的代码中看到的那样。我正在检查

outCalls

是否为真，如果是真的话，我正在创建一个可以与状态连接的新对象数组

useEffect(() => {
        if(outCalls) {
            const transformedOutgoingCalls = outCalls.filter(call => call.contractor._id === props.contractor._id).map(c => ({
                type: 'Outgoing Call',
                contact_person: c.contact_person,
                logged_by: c.created_by.name,
                date: c.time_created,
                link: <> <LinkContainer to={`/outgoing-calls/${c._id}`} className='text-success' style={{ cursor: 'pointer'}}><Eye /></LinkContainer> </>
            }))
            const newData = [...data, transformedOutgoingCalls]
            setData(newData)
        }
    }, [outCalls, props.contractor._id])

但是，在我的dependencies数组中，它表示我缺少

数据

。如果我添加它，它会创建一个mad循环，我会得到错误。与当前一样，对象数组不会加入状态

useEffect(() => {
        if(outCalls) {
            const transformedOutgoingCalls = outCalls.filter(call => call.contractor._id === props.contractor._id).map(c => ({
                type: 'Outgoing Call',
                contact_person: c.contact_person,
                logged_by: c.created_by.name,
                date: c.time_created,
                link: <> <LinkContainer to={`/outgoing-calls/${c._id}`} className='text-success' style={{ cursor: 'pointer'}}><Eye /></LinkContainer> </>
            }))
            const newData = [...data, transformedOutgoingCalls]
            setData(newData)
        }
    }, [outCalls, props.contractor._id])

useffect（（）=>{
如果（呼出）{
const transformedOutgoingCalls=outCalls.filter（call=>call.contractor.\u id==props.contractor.\u id）.map（c=>({
键入：“传出呼叫”，
联系人：c.联系人，
记录人：c.创建人姓名，
日期：c.创建时间，
链接：
}))
const newData=[…数据，转换出调用]
setData（新数据）
}
}，[outCalls，props.contractor.\u id]）

您可以将状态设置为useEffect，而无需将

数据

声明为依赖项，如下所示：-

useEffect(() => {
        if(outCalls) {
            const transformedOutgoingCalls = outCalls.filter(call => call.contractor._id === props.contractor._id).map(c => ({
                type: 'Outgoing Call',
                contact_person: c.contact_person,
                logged_by: c.created_by.name,
                date: c.time_created,
                link: <> <LinkContainer to={`/outgoing-calls/${c._id}`} className='text-success' style={{ cursor: 'pointer'}}><Eye /></LinkContainer> </>
            }))
            setData(prevData => [...prevData, ...transformedOutgoingCalls]);
        }
    }, [outCalls, props.contractor._id])

useffect（（）=>{
如果（呼出）{
const transformedOutgoingCalls=outCalls.filter（call=>call.contractor.\u id==props.contractor.\u id）.map（c=>({
键入：“传出呼叫”，
联系人：c.联系人，
记录人：c.创建人姓名，
日期：c.创建时间，
链接：
}))
setData（prevData=>[…prevData，…transformedOutgoingCalls]）；
}
}，[outCalls，props.contractor.\u id]）

因为您所在的州依赖外呼和道具。承包商。\u id。您可以只使用一个变量，而不是独占一个状态

// read the data from the store
const outCalls = useSelector(....); 


// since the component re-render when ever there is change in props. Whenever your
// props.contractor._id changes we run this function and get the updated data.

const data = useMemo(() => {
   const transformedOutgoingCalls = outCalls.filter(call => call.contractor._id === props.contractor._id).map(c => ({
        type: 'Outgoing Call',
        contact_person: c.contact_person,
        logged_by: c.created_by.name,
        date: c.time_created,
        link: <> <LinkContainer to={`/outgoing-calls/${c._id}`} className='text-success' style={{ cursor: 'pointer'}}><Eye /></LinkContainer> </>
    }));

    return transformedOutgoingCalls
}, [outCalls, props.contractor._id])

//从存储读取数据
const outCalls=使用选择器（…）；
//因为当道具发生变化时，组件会重新渲染。每当你
//props.contractor.\u id更改我们运行此函数并获取更新的数据。
常量数据=使用备注（（）=>{
const transformedOutgoingCalls=outCalls.filter（call=>call.contractor.\u id==props.contractor.\u id）.map（c=>({
键入：“传出呼叫”，
联系人：c.联系人，
记录人：c.创建人姓名，
日期：c.创建时间，
链接：
}));
返回transformedOutgoingCalls
}，[outCalls，props.contractor.\u id]）

在哪里声明变量

数据

？尝试将setData更改为其回调版本，在该版本中，您可以访问以前的状态，并且useEffect将不再抱怨

setData（prevData=>[…prevData，TransformedOutgoingCalls]）

当

承包商id

为1时，您所在州将只有

承包商的列表。\u id

1信息。现在，如果承包商id为2，那么您所在州是否有一个同时包含承包商信息或承包商2信息的列表？@Shyam just contractor 2，因此它获得了承包商id方面的正确数据，当我返回页面Perfect时，只需复制它，非常感谢！如果我导航到某个页面并返回，它会再次执行该操作，并将其添加到已存在的页面之上。所以现在一切都有两次了。我尝试在顶部添加另一个

useffect

，并放置

setData（[]）

，但没有任何改变。我在这里看到的唯一一件事是将outCalls作为依赖项。由于outCalls是一个数组，因此其引用不应在重新渲染之间更改，否则将导致无限次重新渲染，从而导致最大深度超出错误。从何处获取outCalls。是从redux来的吗？@Shyam是的。它说outCalls需要是一个依赖项，它需要处于状态，因为有多个实例需要附加到数据中。因此，像outcalls一样，商店里还有更多的东西我也需要去拿，并做同样的事情