Javascript 使用.put编辑API生成数组中的项

我正在尝试使用.put调用从API中提取的颜色数组中编辑颜色。但是，由于某些原因，我的.put呼叫不起作用。我无法从控制台上的.put日志调用获取响应。当我试图通过单击“保存”按钮提交时，会出现一个错误，显示colors.map不是一个函数。有人知道我如何解决这个问题吗

import React, { useState } from "react";
import axios from "axios";
import { axiosWithAuth } from "../utils/axiosWithAuth";

const initialColor = {
  color: "",
  code: { hex: "" },
};

const ColorList = ({ colors, updateColors }) => {
  console.log(colors);
  const [editing, setEditing] = useState(false);
  const [colorToEdit, setColorToEdit] = useState(initialColor);

  const editColor = color => {
    setEditing(true);
    setColorToEdit(color);
  };

  const saveEdit = e => {
    e.preventDefault();
    // Make a put request to save your updated color
    // think about where will you get the id from...
    // where is is saved right now?
    axiosWithAuth().put(`/colors/${colorToEdit.id}`, colorToEdit)
    .then(res => {
      console.log(res);
      updateColors(res.data);
    })
  };

  const deleteColor = color => {
    // make a delete request to delete this color
  };

  return (
    <div className="colors-wrap">
      <p>colors</p>
      <ul>
        {colors.map(color => (
          <li key={color.color} onClick={() => editColor(color)}>
            <span>
              <span className="delete" onClick={e => {
                    e.stopPropagation();
                    deleteColor(color)
                  }
                }>
                  x
              </span>{" "}
              {color.color}
            </span>
            <div
              className="color-box"
              style={{ backgroundColor: color.code.hex }}
            />
          </li>
        ))}
      </ul>
      {editing && (
        <form onSubmit={saveEdit}>
          <legend>edit color</legend>
          <label>
            color name:
            <input
              onChange={e =>
                setColorToEdit({ ...colorToEdit, color: e.target.value })
              }
              value={colorToEdit.color}
            />
          </label>
          <label>
            hex code:
            <input
              onChange={e =>
                setColorToEdit({
                  ...colorToEdit,
                  code: { hex: e.target.value }
                })
              }
              value={colorToEdit.code.hex}
            />
          </label>
          <div className="button-row">
            <button type="submit">save</button>
            <button onClick={() => setEditing(false)}>cancel</button>
          </div>
        </form>
      )}
      <div className="spacer" />
      {/* stretch - build another form here to add a color */}
    </div>
  );
};

export default ColorList;

import React，{useState}来自“React”；
从“axios”导入axios；
从“./utils/axiosWithAuth”导入{axiosWithAuth}；
常量initialColor={
颜色：“，
代码：{hex:}，
};
const ColorList=（{colors，updateColors}）=>{
控制台日志（颜色）；
const[editing，setEditing]=使用状态（false）；
const[colorToEdit，setColorToEdit]=useState（initialColor）；
const editColor=color=>{
设置编辑（真）；
setColorToEdit（颜色）；
};
const saveEdit=e=>{
e、 预防默认值（）；
//发出put请求以保存更新的颜色
//想想你从哪里得到身份证。。。
//现在保存在哪里？
axiosWithAuth（）.put（`/colors/${colorToEdit.id}`，colorToEdit）
。然后（res=>{
控制台日志（res）；
更新颜色（资源数据）；
})
};
常量deleteColor=color=>{
//发出删除请求以删除此颜色
};
返回(
颜色


{colors.map（颜色=>(
editColor（color）}>
{
e、 停止传播（）；
删除颜色（颜色）
}
}>
x
{" "}
{color.color}

))}

{编辑&&(
编辑颜色
颜色名称：
setColorToEdit（{…colorToEdit，color:e.target.value}）
}
值={colorToEdit.color}
/>
十六进制代码：
setColorToEdit({
…彩色编辑，
代码：{hex:e.target.value}
})
}
value={colorToEdit.code.hex}
/>
拯救
setEditing（false）}>取消
)}
{/*拉伸-在此处构建另一个表单以添加颜色*/}
);
};
导出默认颜色列表；

如果出现“表示colors.map不是函数”的错误，则表示非数组类型中的颜色。您可以使用Array.isArray（颜色）进行检查。如果颜色为数组类型，则返回true