Question

我在React应用程序中使用Material UI，该UI接收JSON数据以显示文本和其他数据。

{ "included": [{ "name": "someName", "price": "0", "required": true }] }

我创建了以下变量： const isRequired = useState(Included[0].required); 它会在控制台日志中返回true。

此JSON对象中的所有其他数据都可以在我的Map函数中很好地呈现，但是现在我想使用required布尔值有条件地呈现该复选框。

{Included.map((include) => {
    console.log('includes', include);
    return (
      <div className="serviceWrapper" key={include.id}>
        <FormControlLabel
          value="end"
          control={
            !isRequired ? (
              <Checkbox
                color="primary"
                onChange={() => {
                  setSomeData(!someData);
                }}
              />
            ) : null
          }
          label={i18next.t('BOX.info')}
          labelPlacement="End"
        />
        <span className="price_right">
          {include.price > 0 ? include.price : ''}
        </span>
      </div>
    );
  })}

但是，这将在index.js中返回错误Unhandled Rejection (TypeError): Cannot read property 'props' of null。我不确定我可以尝试使用的方式来操作Material UI Checkbox。还有其他方法可以做到吗？

Answer 1

根据the documentation，需要checked的{{1}}属性。（如果将鼠标悬停在其旁边的$("input[name='is_valid']:checked").val()上，工具提示将显示为“ required”。）为此提供control无效。看来您将不得不保留整个FormControlLabel。

Answer 2

似乎像FormControlLabel尝试将数据发送到其控制元素。如果控件是Checkbox，则没有问题，但是无法将.props属性设置为null。尝试用一个空的div替换null或有条件地呈现整个FormControlLabel。

有条件地渲染“材质”复选框

2 个答案: