使用 useState 将 concat 当前状态（数组）与另一个数组反应答案

【问题标题】：React concat current state(array) with another array using useState使用 useState 将 concat 当前状态（数组）与另一个数组反应
【发布时间】：2021-08-10 17:49:14
【问题描述】：

我的组件的初始状态是一个对象数组。我正在使用 Redux 获取另一个对象数组，如您在下面的代码中所见。我正在检查 outCalls 是否为真，如果是，我正在创建一个可以与状态连接的新对象数组。

但是，在我的依赖项数组中，它说我缺少data。如果我添加它，它会创建一个疯狂的循环并且我得到错误。就目前而言，对象数组并未加入状态。

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])

【问题讨论】：

你在哪里声明变量data？
尝试将setData改成它的回调版本，在这个版本中你可以访问之前的状态，useEffect将不再抱怨setData(prevData => [...prevData, tranformedOutgoingCalls])
当 contractor._id 为 1 时，您的州将有一个仅包含 contractor._id 1 信息的列表。现在，如果contractor._id 为 2，您所在的州是否有一份包含承包商信息或仅包含承包商 2 信息的列表？
@Shyam 只是承包商 2，因此它正在获取承包商 ID 方面的正确数据，当我返回页面时只需复制它

标签： javascript arrays reactjs use-state

【解决方案1】：

您可以在 useEffect 中设置状态，而无需将 data 声明为依赖项，如下所示：-

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])

【讨论】：

完美，非常感谢！当它让我接受时会接受
实际上发生了一个问题，如果我导航到一个页面并返回，它会再次执行此操作并将其添加到已经存在的内容之上。所以现在一切都在那里两次。我尝试在顶部添加另一个 useEffect 并放入 setData([]) 但没有任何变化
我在这里看到的唯一一件事就是将 outCalls 作为依赖项。因为 outCalls 是一个数组，它的引用不应该在重新渲染之间发生变化，否则它将导致无限重新渲染，从而导致超出最大深度错误。
您从哪里获得 outCalls？ .是来自 redux 吗？
@Shyam 是的。它说 outCalls 需要成为一个依赖项

【解决方案2】：

由于您的状态取决于 outCalls 和 props.contractor._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])

【讨论】：

它需要处于状态，因为有多个实例我必须附加到数据。所以就像外呼一样，商店里还有更多的东西我需要拿来做同样的事情