Question

我想更新依赖于其他计算状态（服务器）的状态（数据）

 A11yModule,
 CdkStepperModule,
 CdkTableModule,
 CdkTreeModule,
 DragDropModule,
 MatAutocompleteModule,
 MatBadgeModule,
 MatBottomSheetModule,
 MatButtonModule,
 MatButtonToggleModule,
 MatCardModule,
 MatCheckboxModule,
 MatChipsModule,
 MatStepperModule,
 MatDatepickerModule,
 MatDialogModule,
 MatDividerModule,
 MatExpansionModule,
 MatGridListModule,
 MatIconModule,
 MatInputModule,
 MatListModule,
 MatMenuModule,
 MatNativeDateModule,
 MatPaginatorModule,
 MatProgressBarModule,
 MatProgressSpinnerModule,
 MatRadioModule,
 MatRippleModule,
 MatSelectModule,
 MatSidenavModule,
 MatSliderModule,
 MatSlideToggleModule,
 MatSnackBarModule,
 MatSortModule,
 MatTableModule,
 MatTabsModule,
 MatToolbarModule,
 MatTooltipModule,
 MatTreeModule,
 PortalModule,
 ScrollingModule

上面的数据将用于设置下面的状态（数据）：

 setServer(prevTweets =>
          [...json, ...prevTweets].filter(
            (e, i, arr) => i === arr.findIndex(t => t.tweetId === e.tweetId)
          )
  )

由于它是异步的，因此setData操作总是很晚。我知道我可以使用useEffect，但显然它将产生一个无限循环，在这种情况下不宜使用它。

Answer 1

如果在设置服务器之前设置了新数据，则会跳过一个渲染：

//still defaults to server so if you do't pass anything it;s still the same
const setNewData = (newServer = server) => {
  const [
    totalPositive,
    totalNegative,
    totalNeutral,
  ] = newServer.reduce(
    ([pos, neg, neu], { sentiment }) =>
      sentiment > 0
        ? [pos + 1, neg, neu]
        : sentiment < 0
        ? [pos, neg + 1, neu]
        : [pos, neg, neu + 1],
    [0, 0, 0]
  );

  setData([
    { name: 'Positive', value: totalPositive },
    { name: 'Negative', value: totalNegative },
    { name: 'Neutral', value: totalNeutral },
  ]);
};

setServer(prevTweets => {
  const newServer = uniqueByTweetId([
    ...json,
    ...prevTweets,
  ]);
  setNewData(newServer);
  return newServer;
});

与问题无关，但可能重要的是，可以改善获取唯一值的方式。您可以一次获得唯一值，而无需多次调用find index：

const uniqueBy = getter => arr => {
  const items = new Map();
  return arr.filter(item => {
    const key = getter(item);
    const ret = items.get(key);
    items.set(key,true);
    return !ret;
  });
};
const data = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
  { id: 5 },
  { id: 1 },
  { id: 7 },
  { id: 1 },
  { id: 7 },
  { id: 8 },
  { id: 1 },
];
const uniqueById = uniqueBy(i => i.id);
console.log(uniqueById(data));

更新状态取决于React-Hooks中的其他计算状态

1 个答案: