如何在React的useEffect每次触发时清理useState定义的状态

你现在的写法存在两个可优化点：一是循环内多次调用状态更新函数会触发多次不必要的重渲染，二是使用prevState拼接旧值自然不会清空原有状态。
要实现每次useEffect触发时重置状态，直接计算完整的新状态数组后一次性赋值即可，不需要沿用旧状态：

const [id, setNodos] = useState([]);

useEffect(() => {
  // 直接生成全新的数组赋值，自动覆盖原有状态，实现清空效果
  const newNodos = props.data.channel.map((canales, i) => ({
    channelId: canales.channelId,
    x: (dimensions.width/4)*Math.cos(2 * Math.PI * ((i/ props.data.channel.length)+ 0.75))
  }))
  setNodos(newNodos)
}, [props.data])

如果确实有特殊场景需要先手动清空再赋值（比如异步操作的场景），也可以在useEffect执行的最开始先调用setNodos([])重置状态：

useEffect(() => {
  // 第一步先清空状态
  setNodos([])
  props.data.channel.map((canales,i) => (
    setNodos(prevState => [...prevState, {channelId: canales.channelId, x:(dimensions.width/4)*Math.cos(2 * Math.PI * ((i/ props.data.channel.length)+ 0.75))}])
  ))
},[props.data])

注意第二种写法不推荐，多次更新状态会带来额外的性能开销，优先选择一次性计算完整数组再赋值的方案。

内容的提问来源于stack exchange，提问作者xzethxsz