React自定义TextArea组件显示[object Object]问题如何修复

问题原因 #

React 函数组件的第一个入参永远是所有属性组成的props对象，你当前的组件定义没有对props做解构，直接把第一个参数（也就是整个props对象）赋值给了textarea的value属性，对象转为字符串展示时就会输出[object Object]。
具体对应关系如下：

• 你定义的TextArea(name, value, onChange)中，name接收的是完整的props对象{name: "about", value: about, onChange: ...}
• value和onChange两个参数实际收到的都是undefined
• 最终textarea的value被赋值为props对象，转字符串后就是你看到的错误内容

修复方案 #

只要修改组件定义，对props参数做解构即可，修改后的代码如下：

import React from "react";

// 给参数加上大括号，从props中解构对应的属性
export default function TextArea({name, value, onChange}) {
  return (
    <div className="mt-1">
      <textarea
        rows={3}
        className="mt1 block w-full py-1.5 px-3 rounded-md border-2 border-orange-light"
        placeholder="Digite"
        value={value}
        onChange={onChange}
        name={name}
      />
    </div>
  );
}

如果你不想用解构写法，也可以先接收props参数再逐个取属性：

import React from "react";

export default function TextArea(props) {
  return (
    <div className="mt-1">
      <textarea
        rows={3}
        className="mt1 block w-full py-1.5 px-3 rounded-md border-2 border-orange-light"
        placeholder="Digite"
        value={props.value}
        onChange={props.onChange}
        name={props.name}
      />
    </div>
  );
}

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