ReactJS中遍历TypeScript数组报void不可赋值给ReactNode如何解决

你将forEach调用直接写在了JSX的返回结构内部。Array.prototype.forEach执行后返回值为void类型，而JSX元素的children属性要求传入的值必须是合法的ReactNode类型（包含字符串、数字、JSX元素、null、undefined、上述类型的数组），类型不匹配因此触发ts(2322)报错。

根据你的实际需求选择对应方案即可：

• 仅需要打印数组内容，不需要在页面渲染数组元素：将forEach逻辑移到JSX的return语句之外，比如类组件中可以放在render方法return之前的位置：

interface Item{
  item: string;
  type: string;
  answer: string;
  // 可优化类型，替换any为你声明的string|number
  answers: Array<string | number>;
}    

interface Props {
  items: Item[];
}

class YourComponent extends React.Component<Props> {
  render() {
    // 放return外执行打印逻辑，不放入JSX结构
    this.props.items[0].answers.forEach((item) => console.log(item));
    return (
      <div>
        {/* 页面渲染内容 */}
      </div>
    )
  }
}

• 既需要打印内容，也需要将数组元素渲染到页面：将forEach替换为Array.prototype.map，map会返回React可识别的节点数组，回调内可同时执行打印逻辑，注意给渲染的列表元素添加唯一key属性：

render() {
  return (
    <div>
      {this.props.items[0].answers.map((item, index) => {
        console.log(item);
        // 若元素值唯一建议用item作为key，这里用index仅做示例
        return <span key={index}>{item}</span>
      })}
    </div>
  )
}

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