Question

下面是我的功能组件与此问题相关的代码，

在useState（）挂钩中对数据进行一些处理之后，如何设置初始值？

const data = props.data ? props.data : {};
const statusOptions = [
  { label: "Active", value: "active" },
  { label: "Inactive", value: "inactive" },
  { label: "Complete", value: "completed" },
];
const defaultStatus = statusOptions.filter(
  option => option.value === data["status"],
)[0];

//This does not work
const [status, setStatusValue] = useState(defaultStatus);
console.log(status); //undefined

//Below works
const [status, setStatusValue] = useState({
  label: "Complete",
  value: "completed",
});
console.log(status); //{label:"Complete",value:"completed"}

Answer 1

如果您遇到相同的问题，我认为这可能会有所帮助

initialState参数是初始渲染期间使用的状态。在随后的渲染中，将忽略它。

因此，如果数据不可用，我们不应该渲染该组件，因为initialState可能为空，并且此空值将保留在那里，供后续渲染使用。

我希望这会有所帮助。

Answer 2

您可能不想使用状态中的整个状态对象，而只使用值。

此外，您可以使用一个功能为状态设置一次默认值：

const statusOptions = [
  { label: "Active", value: "active" },
  { label: "Inactive", value: "inactive" },
  { label: "Complete", value: "completed" },
];
const Thing = ({ data }) => {
  const [statusValue, setStatusValue] = useState(() => {
    const currentStatus = statusOptions.find(
      option => option.value === data.status,
    );
    // Default to `completed` if there was no value in the props
    return currentStatus ? currentStatus.value : "completed";
  });
  const status = statusOptions.find(
    option => option.value === statusValue,
  );
  return <div>{JSON.stringify({ data, statusValue, status })}</div>;
};

Answer 3

您应确保props.data.status不为空。

如果props.data.status为空，则后备值空字符串''将确保status未被定义。

const data = props.data ? props.data : {};

const statusOptions = [
  { label: "Active", value: "active" },
  { label: "Inactive", value: "inactive" },
 { label: "Complete", value: "completed" },
];

const defaultStatus = statusOptions.filter(
  option => option.value === data["status"],
)[0];

const [status, setStatusValue] = useState(defaultStatus || '');


//using effect hooks and deps to execute logic as componentWillMount
    useEffect(() => {
      // check that props.data.status is non-empty and update statusValue
      if (props.data.status !== '') {
         setStatusValue(props.data.status);
      }
    }, [props.data.status]);

React useState设置初始值无效

3 个答案: